AngularJs练习Demo2

  1 @{
  2     Layout = null;
  3 }
  4 
  5 <!DOCTYPE html>
  6 
  7 <html>
  8 <head>
  9     <meta name="viewport" content="width=device-width" />
 10     <title>ng工具类</title>
 11     <script src="~/Scripts/angular.js"></script>
 12     <script type="text/javascript" src="~/Scripts/js/index2.js"></script>
 13 </head>
 14 <body>
 15     <div ng-app="myApp">
 16         <div ng-controller="firstController">
 17             {{name}}
 18             {{isArray}}
 19             {{name1}}
 20             {{eq}}
 21         </div>
 22         <div ng-controller="threeController">
 23             {{name}}
 24         </div>
 25     </div>
 26     @*******动态初始化Model ↓**********@
 27     <div id="div1" ng-controller="firstController">
 28         {{name}}
 29     </div>
 30     <div id="div2" ng-controller="secondController">
 31         {{name}}
 32     </div>
 33     <script type="text/javascript">
 34         var app = angular.module("myApp", ['myApp3']);//threeController定义在Index2.js文件中
 35         app.controller("firstController", function ($scope) {
 36             $scope.name = "zhangsan";
 37             $scope.arr = [1, 2, 3];
 38             $scope.a = '111';
 39             $scope.b = '222';
 40             $scope.a1 = { name: "张三" };
 41             $scope.b1 = { age: "10" };
 42             $scope.isArray = angular.isArray($scope.arr);//判断是否是数组
 43             $scope.name1 = angular.uppercase($scope.name);//转成大写
 44             $scope.eq = angular.equals($scope.a, $scope.b);//判断两个字符串是否相等
 45             $scope.c1 = angular.extend($scope.b1, $scope.a1);//b1继承a1
 46             console.log($scope.b1);
 47             var json = { "name": "hello", "age": "20" };
 48             $scope.json = angular.toJson(json); //toJson 把json对象转换成字符串
 49             $scope.json1 = angular.toJson(json, true);//第二个参数表示是否要格式化
 50             var jsonStr = ' { "name": "hello", "age": "20" }';
 51             $scope.jsonObj = angular.fromJson(jsonStr);//把字符串转化为对象
 52 
 53             $scope.a2 = { name: "张三" };
 54             $scope.b2 = { age: "10" };
 55             $scope.c2 = angular.copy($scope.a2, $scope.b2); //把a2拷贝给b2，b2原有的值会被替换掉
 56 
 57             var jsonObj = { "name": "hello", "age": "20" };
 58             angular.forEach(jsonObj, function (val, key) {
 59                 console.log(val);
 60             });
 61 
 62             var result = [];
 63             angular.forEach(jsonObj, function (val, key) {
 64                 this.push(val + key);
 65             }, result);
 66 
 67 
 68             //[bind]绑定对象作为函数的上下文
 69             var self = { name: "张三" };
 70             var f = angular.bind(self, function (age) {
 71                 $scope.info = this.name + " is" + age;
 72                 console.log($scope.info);
 73             });
 74             f(30);
 75 
 76             //bind的另外一种写法
 77             var f = angular.bind(self, function (age) {
 78                 $scope.info = this.name + " is" + age;
 79                 console.log($scope.info);
 80             }, 30);
 81             f();
 82 
 83         });
 84         //一个页面内不能定义两个ng-app的标签  ,bootstrap可以动态初始化model
 85         var app1 = angular.module("myApp1", []);
 86         var app2 = angular.module("myApp2", []);
 87         app1.controller("firstController", function ($scope) {
 88             $scope.name = "动态初始化model1";
 89         });
 90         app2.controller("secondController", function ($scope) {
 91             $scope.name = "动态初始化model2";
 92         });
 93         var div1 = document.getElementById("div1");
 94         var div2 = document.getElementById("div2");
 95         document.onclick = function () {
 96             angular.bootstrap(div1, ['myApp1']);
 97             angular.bootstrap(div2, ['myApp2']);
 98         }
 99     </script>
100 </body>
101 </html>

var app2 = angular.module("myApp3", []);
app2.controller("threeController", function ($scope) {
    $scope.name = "王五";
});