Angular学习1

来源：互联网发布：美国公务员知乎编辑：程序博客网时间：2024/06/06 05:30

当网页加载完毕，AngularJS 自动开启。Angular操作的是一个作用域
ng-app 指令告诉 AngularJS，在如下代码中div 元素是 AngularJS 应用程序的”所有者”，即anjular作用于整个div域

ng-model 指令把输入域的值绑定到应用程序变量 name。

当在文本框里输入任意内容时，以Hello开头的标题会随着输入文本框里的内容变化而变化

AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中，不支持条件判断，循环及异常，支持过滤器。
- 段落标签’p’里表达式将显示5+5的结果10

ng-init指令用于声明变量并可以为变量赋上初值
ng-bind 指令把应用程序变量 name 绑定到某个段落innerHTML。

<body><div ng-app="myApp" ng-init="str1='12'; str2='34'" ng-controller="myCtrl">  <p>名字 : <input type="text" ng-model="name"></p>  <h1>Hello {{name}}</h1>    <br/>    <p>账号：<input type="text" ng-model="login" width="200" id="loginNum"></p>    <p>************{{login}}</p>    <p>{{5+5}}</p>    <p>{{str1+str2}}</p>    <p><span ng-bind="str1+str2"></span></p>    <br/>    <input ng-model="age">    <h2>{{age}}</h2></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.age = "19";});</script></body></html>

angular.module()方法来声明模块，这个方法可以接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是被注入到模块中的列表对象。

写法：
anjular.module(“app_Name”,[])
如果调用这个方法只传入了一个参数，那么就不是声明模块而是引用模块

anjular js的标准写法:

<script type="text/javascript"   var app=angular.module("appName",[]);   //例如在上面<div>元素里有ng-app="myApp"，因此声明模块时应把   //myApp作为参数传递给angular.module()方法   app.controller('myCtrl', function($scope) {    $scope.age = "19";   //app.controller()方法的第一个参数是控制器的名称   //$scope对象就是一个普通的JavaScript对象，   //我们可以在其上随意修改或添加属性。});</script>

scope 是一个对象，有可用的方法和属性；可应用在视图和控制器上，创建AngularJS控制器时，可以将$scope对象当作一个参数传递

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中,即作用于整个应用中,是各个 controller 中 scope 的桥梁。scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的传送器。

-用 $rootscope 定义的值，可以在各个 controller 中使用

0 0