@{

     Layout = null;

 }

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>ng工具类</title>

     <script src="~/Scripts/angular.js"></script>

     <script type="text/javascript" src="~/Scripts/js/index2.js"></script>

 </head>

 <body>

     <div ng-app="myApp">

         <div ng-controller="firstController">

             {{name}}

             {{isArray}}

             {{name1}}

             {{eq}}

         </div>

         <div ng-controller="threeController">

             {{name}}

         </div>

     </div>

     @*******动态初始化Model ↓**********@

     <div id="div1" ng-controller="firstController">

         {{name}}

     </div>

     <div id="div2" ng-controller="secondController">

         {{name}}

     </div>

     <script type="text/javascript">

         var app = angular.module("myApp", ['myApp3']);//threeController定义在Index2.js文件中

         app.controller("firstController", function ($scope) {

             $scope.name = "zhangsan";

             $scope.arr = [1, 2, 3];

             $scope.a = '111';

             $scope.b = '222';

             $scope.a1 = { name: "张三" };

             $scope.b1 = { age: "10" };

             $scope.isArray = angular.isArray($scope.arr);//判断是否是数组

             $scope.name1 = angular.uppercase($scope.name);//转成大写

             $scope.eq = angular.equals($scope.a, $scope.b);//判断两个字符串是否相等

             $scope.c1 = angular.extend($scope.b1, $scope.a1);//b1继承a1

             console.log($scope.b1);

             var json = { "name": "hello", "age": "20" };

             $scope.json = angular.toJson(json); //toJson 把json对象转换成字符串

             $scope.json1 = angular.toJson(json, true);//第二个参数表示是否要格式化

             var jsonStr = ' { "name": "hello", "age": "20" }';

             $scope.jsonObj = angular.fromJson(jsonStr);//把字符串转化为对象

             $scope.a2 = { name: "张三" };

             $scope.b2 = { age: "10" };

             $scope.c2 = angular.copy($scope.a2, $scope.b2); //把a2拷贝给b2，b2原有的值会被替换掉

             var jsonObj = { "name": "hello", "age": "20" };

             angular.forEach(jsonObj, function (val, key) {

                 console.log(val);

             });

             var result = [];

             angular.forEach(jsonObj, function (val, key) {

                 this.push(val + key);

             }, result);

             //[bind]绑定对象作为函数的上下文

             var self = { name: "张三" };

             var f = angular.bind(self, function (age) {

                 $scope.info = this.name + " is" + age;

                 console.log($scope.info);

             });

             f(30);

             //bind的另外一种写法

             var f = angular.bind(self, function (age) {

                 $scope.info = this.name + " is" + age;

                 console.log($scope.info);

             }, 30);

             f();

         });

         //一个页面内不能定义两个ng-app的标签  ,bootstrap可以动态初始化model

         var app1 = angular.module("myApp1", []);

         var app2 = angular.module("myApp2", []);

         app1.controller("firstController", function ($scope) {

             $scope.name = "动态初始化model1";

         });

         app2.controller("secondController", function ($scope) {

             $scope.name = "动态初始化model2";

         });

         var div1 = document.getElementById("div1");

         var div2 = document.getElementById("div2");

         document.onclick = function () {

             angular.bootstrap(div1, ['myApp1']);

             angular.bootstrap(div2, ['myApp2']);

         }

     </script>

 </body>

 </html>
var app2 = angular.module("myApp3", []);

app2.controller("threeController", function ($scope) {

    $scope.name = "王五";

});

AngularJs练习Demo2的更多相关文章

  1. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  2. 前端 初识angularJS的基本概念

    DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1   今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...

  3. angularjs 权威指南 版本 1.2.6

    1 $rootScope  run  : run 方法初始化全局的数据 ,只对全局作用域起作用 如$rootScope <script src="http://apps.bdimg.c ...

  4. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  5. AngularJS+ThinkPHP实例教程

    总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...

  6. 初识angularJS的基本概念

    今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...

  7. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

  8. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  9. angularjs $scope与this的区别，controller as vm有何含义？

     壹 ❀ 引 初学angularjs的同学对于$scope一定不会陌生,scope(作用域)是将view(视图)与model(模板)关联起来的桥梁,通过controller(控制器)对于model的数 ...

随机推荐

  1. Oracle除去换行符的方法

    Oracle除去换行符的方法   很多数据存进数据库后,可能需要将整条数据取出,并用特殊 符号分割,而且整条数据必须是处于一行,如此,如果数据出现 换行的情况,那么读取时就有问题.     这个时候就 ...

  2. 一、webpack那点事-安装、环境搭建

    前言: 还记得两年前刚来公司才几个月,经理就安排我去做JS地图相关的维护和开发工作,然后就跟着一个公司老鸟(没俩月他离职了)熟悉地图相关的功能. 本人嘛,那会前端JS实际开发经验也才几个月,然后当我看 ...

  3. debug 心得

    前天做了一个题,就是个简单的状压记忆化搜索,但是debuge了俩小时,给我整的快吐血了,各种不可思议的错误,我都要怀疑是不是电脑有毛病了,后来发现数组开小了,看来以后遇到不可思议的错误就要检查数组开没 ...

  4. javascript中的substr和substring

    1.substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参数: stringvar 必选项.  要提取子字符串的字 ...

  5. Javascript获取某个月的天数-简单方法 .(转别人的)

    Javascript里面的new  Date("xxxx/xx/xx")这个日期的构造方法有一个妙处,当你传入的是"xxxx/xx/0"(0号)的话,得到的日期 ...

  6. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  7. javascript中的一些基本方法收藏

    W3C DOM 什么是DOM,DOM其实就是把一个HTML或者XML等符合W3C标准的文档内容模拟成一个JAVA对象,这样才能给JAVA或者JS来操作.下面是JS中模拟出的内置DOM对象documen ...

  8. 【杭州图铭科技有限公司招募贴】——“JUST DO IT”

    I'm convinced that the only thing that kept me going was that I loved what I did. ——Steve Paul Jobs( ...

  9. 关于javascript 回调函数

    http://segmentfault.com/q/1010000000212522 如何避免Javascript中回调函数的嵌套? http://javascript.ruanyifeng.com/ ...

  10. Bash 使用技巧大补贴

    https://linuxtoy.org/archives/the-best-tips-and-tricks-for-bash.html