Ⅰ.AngularJS的点点滴滴--引导

时间：2023-12-28 23:32:56

AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧

页面引导实例化

1.自动实例化

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<body ng-app="app">1+2={{1+2}}</body>

<script>angular.module('app',[])</script>

</html>

如果不写app这个值那么script的内容可以不写

2.手动实例化（主要通过js来引导）

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<body>1+2={{1+2}}</body>

<script>

　　　　angular.module('app',[])

　　　　　　.conifg(function(){})

　　　　　　.run(function(){alert('start');});

　　　　angular.bootstrap(document, ['app']);

</script>

</html>
  • 为什么声明一个模块后面有一个中括号?
  • 因为angular是模块开发,声明一个模块必须要依赖另一个模块或者空模块，否则就声明失效啦
  • config的方法可以配置模块，run是在模块执行前所执行的方法

模块的依赖调用

angular.module('route',[]);

angular.module('app',['route']);

就是这么简单直接route模块的东西都可以被app模块所调用声明一个模块必须要依赖另一个模块或者空模块

模块的控制器($scope这个参数即为控制器的上下文)

1.调用模块的controller方法即可声明一个控制器而且返回当前模块所以可以用级联,

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<body ng-controller="a">{{data}}</body>

<script>

　　angular.module('app.controller',[])

　　　　.controller('a',['$scope',function($scope){

　　　　　　　　$scope.data=1;

　　　　}]);

　　angular.module('app',['app.controller']);

　　angular.bootstrap(document, ['app']);

</script>

</html>
  • 为什么声明一个$scope这个变量?
  • 因为当进行压缩js代码的时候变量名称改变,为了第一个参数为$scope这个变量而设计的,
  • 所以可以写成
angular.module('app.controller',[])

　　.controller('a',['$scope',function(c){　　

　　　　c.data=1;

　　}]);
  • 如果不压缩也可以写成
angular.module('app.controller',[])

　　.controller('a',function($scope){　　

　　　　$scope.data=1;

　　});

2.直接声明一个全局方法

function a(a){c.data=1;}

a.$inject = ['$scope'];

angular.module('app',[]);

angular.bootstrap(document, ['app']);

controller的$inject对象也是同上原因声明第一个参数为$scope,如果不压缩可以忽略

数据绑定

数据绑定是用了2个大括号,并且获取controller中的数据，如果使用指令则{{}}可以省略直接写属性

相关文章