适配环境

使用npm或者bower安装angular;然后拷贝angular.js出来使用;导入到文件中;

#安装angular
##
通过npm安装
- npm install angular
##
通过bower安装
- bower install angular
- 安装bower
- npm install bower -g

 

使用方法

需要通过ng-app的指令来指定angular的控制范围;

如果放在html的标签上,angular就会控制整个html代码;

需要模块来导入;angular是强制模块化的,一切都基于模块;np-app内必须要有字符串;而且ng-app必须只有一个;属于入口,是不能有多个的,默认会忽略第二个;

<!DOCTYPE html>
<
html ng-app="appModule">
<
head lang="en">
<
meta charset="UTF-8">
<
title></title>
</
head>
<
body>

</body>
<
script src="angular/angular.js"></script>
<
script>
var app=angular.module("appModule",[]);//设置模块
angular.module("appModule");//这么写就是获取模块
/*获取模块的方法

* 1angular.module("appModule");这个就是获取;
* 2、直接写app
*
上面两种方法都是一样的;

* */
</script>
</
html>

angular的初步使用

<!DOCTYPE html>
<
html ng-app="appModule">
<
head lang="en">
<
meta charset="UTF-8">
<
title></title>
</
head>
<
body>
<!--appCtrl
和下面的app.controller('appCtrl',一样。这样下面的控制器就可以控制这个DIV-->
<div ng-controller="appCtrl"
>
<!--下面的name是放在双引号里面的;-->
hello {{name}}
<!--此时输出的是”hello broszhu“,此时的broszhu是下面控制来的;-->
</div
>
</
body>
<
script src="angular/angular.js"></script>
<
script>
var app=angular.module("appModule",[]);
/*下面是一个控制器*/
app
.controller('appCtrl',function($scope){//
这了的appCtrl是自定义的字符串;$scopeangular给我们提供的对象,默认是一个空对象{};可以在上面添加属性,angular会自动帮我们注入;
$scope.name="broszhu";
})
</
script>
</
html>

上面输入“hello broszhu”

可以通过该angular标签上ng-controller内的字符串来改变控制器;如下;

<body>
<
div ng-controller="appCtrl">hello {{name}}</div>
<
br/>
<
div ng-controller="appCtrl2">hello {{name}}</div>
</
body>
<
script>
var app=angular.module("appModule",[]);
app.controller('appCtrl',function($scope){
$scope.name="broszhu";
})
app.controller('appCtrl2',function($scope){
$scope.name="broszhu2";
})
</
script>

上面显示的就是

hello broszhu

hello broszhu2

其中各个$scope是相互独立的,相当于在不同的作用域里

下面这种嵌套关系的,更可以体现$scope是不同作用域的

<div ng-controller="appCtrl">
{{name}}
{{
age}}
<div ng-controller="appCtrl2">
{{name}}
{{
age}}
<!--此时appCtrl2的控制器内没有age-->
</div>
</
div>
</
body>
<
script>
var app = angular.module("appModule", []);
app.controller('appCtrl', function ($scope) {
$scope.name = "broszhu";
$scope.age = "1";
});
app.controller('appCtrl2', function ($scope) {
$scope.name = "broszhu2";
});
</
script>

出来的代码是

broszhu 1

broszhu2 1(这里是1是取自appCtrl内的age的;)

类似于JavaScript中的Function原型链查找

控制器内除了命名普通的变量外,还可以很多形式的;

<body>
<
div ng-controller="appCtrl">
{{name}}+{{preson.name}}+{{preson.age}}+{{fun("this is")}}
</div>
</
body>
<
script>
var app=angular.module("appModule",[]);
app.controller('appCtrl',function($scope){
$scope.name="broszhu";
$scope.preson={
name:"preson上的name",
age:"preson上的age"
};
$scope.fun=function(arg){alert(arg+"function内弹出的字符串")}//这里的代码会运行,但是在页面上无法显示;
});
</
script>

会有三个弹窗,同时最终的结果是“【broszhu】+【preson上的name】+【preson上的age】+【】”

angular用法的思路:

  1. 先声明一个模块,后面学习的指令过滤器等都是挂在模块上的;(一个模块可以依赖别的模块,这就是最简单的MVC);模块像一个篮子,所有的东西都要放在篮子里;angular的东西都是基于模块的;
  2. 在模块下建立控制器,每个控制器都有自己的$scope;而且不同的控制器是可以嵌套的,子控制器可以继承父控制器的方法和属性;(继承的原理:每个控制器都有一个属性叫parent,而且控制器的parent默认是null。通过parent属性来关联父控制器;控制器的ID是递增的;顶级控制器是ng-app,它的ID是1,属于根作用域,根作用域有一个$rootScope,正常控制器的$cope就是从$rootScope派生出来的;)
//可以通过console的方法来把对象输出,通过这个来学习控制器
console.dir($rootScope);
console.dir($scope
);

通过根作用域$rootScope可以实现数据的共享的;

<body>
<
div ng-controller="appCtrl">
{{name}}
{{
rootAge
}}
</div
>
<
div ng-controller="appCtrl2">
{{name}}
{{
rootName
}}
</div
>
</
body>
<
script>
var app = angular.module("appModule", []);
app.controller('appCtrl', function ($scope,$rootScope) {
$scope.name = "broszhu";
$rootScope.rootName="根作用域的名字"

});
app.controller('appCtrl2', function ($scope,$rootScope) {
$scope.name = "broszhu2";
$rootScope.rootAge="根作用域的年龄"
});
</
script>

上面出来的是

broszhu 根作用域的年龄

broszhu2 根作用域的名字

使用注意:$rootScope是根作用域,使用时候需要注入;而且$rootScope和$scope是按照名字来查的,注入时候顺序无所谓

$parent的用法;(用于父子之间的控制器)

<body>
<
div ng-controller="appCtrl">
{{name}}
{{
parentName
}}
<div ng-controller="appCtrl2">
{{name}}
</div>
</
div>

</body>
<
script>
var app = angular.module("appModule", []);
app.controller('appCtrl', function ($scope) {
$scope.name = "broszhu";
});
app.controller('appCtrl2', function ($scope) {
$scope.name = "broszhu2";
$scope.$parent.parentName="这是parentName";//可以通过parent来对上一级控制器实现修改;这时候需要是父子关系才可以用;
});
</
script>

上面显示的是

broszhu 这是parentName

broszhu2

控制器使用注意

  1. 不要复用控制器(controller),一个控制器只控制一个视图;
  2. 不要在控制器内操作DOM,如果需要操作,要用指令操作
  3. 不要在控制器内进行数据格式化,数据过滤等操作,因为那样会修改原始值,视图如果需要多样化数值,就不方便了,->要用过滤器目的就是不破坏数据的原始值
  4. 不要互相调用控制器,通过事件来实现

~~~~~~~~~