使用 angularjs
首先在页面的<html>里添加一个模块写法：
<html lang="en"ng-app="myApp">
myApp是模块的名字;
接下来就可以写html标签了：
<div ng-controller="myctr1">
<p>{{name}}</p>
</div>
myctr1 是控制器的名字 p标签里的写法就是访问 js 代码中控制器里的变量
页面控制器可以嵌套控制器，当子控制器访问的属性没有时，就会向上寻找父控制器里有没有，直到根控制器
$scope 当前作用域
$rootScope 根作用域
首先要创建一个模块：
var app = angular.module('myApp',[]);
创建当前范围$scope -写法：
app.controller(myctr1',function($scope){
$scope.name = '大厨的笔记';
});
创建根范围$rootScope -写法：
app.controller('myctr1',function($rootScope){
$rootScope.age = '24';
});
根范围可以和当前范围写到一个控制器里-写法：
app.controller('myctr1',function($scope,$rootScope){
$scope.name = '大厨的笔记';
$rootScope.age = '24';
});
当前范围$scope:
在当前作用域定义的属性只有当前作用域可以访问到，其他的作用域里是访问不到的，就像局部变量一样。
根范围$rootScope:
根作用域定义的属性所有的作用域都可以访问到，就像全局变量一样。
优先级：
如果访问的属性在当前范围内没有找到就会使用根范围内定义的属性，如果找到了就不会使用根范围内的属性，就像 js 中的原型链一样。
使用当前范围$scope 定义的属性只能在当前控制器里访问。
使用根范围$rootScope 定义的属性在对应的模块里的任何控制器里都可以访问到
表达式-写法:
<p>{{1-1}}</p>
输出 0 可以写判断运算符同样输出 true / false
接下来是整个 HTML 代码：
<!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>angularJs</title> <style> *{padding:0;margin:0;} body{padding-bottom:100px;} </style> <script src="angular/angular-1.2.19.min.js"></script> </head> <body> <input type="text" ng-model="user"/> <p>{{user}}</p> <h1>表达式</h1> <p>{{'hello'+" "+'world'}}</p> <p>{{123}}</p> <div ng-init="arr=['a','b','c','d']"> <h2>数组</h2> <p>{{arr[0]}}</p> <p>{{arr[1]}}</p> <p>{{arr[2]}}</p> <p>{{arr[3]}}</p> </div> <div ng-init="arr1={name:'123'}"> <h2>对象</h2> <p>{{arr1.name}}</p> </div> <div> <h2>运算符</h2> <p>{{1+1}}</p> <p>{{1-3}}</p> <p>{{2*4}}</p> <p>{{3/6}}</p> </div> <div> <h2>比较运算符</h2> <p>{{3>1}}</p> </div> <div> <h2>控制器</h2> <div ng-controller="myctrl"> <p>用户名：{{username}}</p> </div> <div ng-controller="myctr2"> <p>{{text}}</p> <button ng-click="play(33)">点击</button> </div> </div> <div ng-controller="myctr3"> <p>{{userInfo.name}}</p> <button ng-click = "userInfo.fn(33333333333)">点击</button> </div> <script> angular.module('myApp',[]) .controller('myctrl',function($scope){ $scope.username = 'chenzhanghui'; }) .controller('myctr2',function($scope){ $scope.text = '我是第二个控制器'; $scope.play = function(e){ alert(e); } }) .controller('myctr3',function($scope){ $scope.userInfo = { name:'大厨的笔记', fn:function(){ alert(arguments[0]); } } }) </script> </body> </html>