@{

     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. Spring框架知识总结-注入Bean的各类异常

    近日整合sping和hibernate框架时遇到了一系列的异常,本次主要说明一下spring框架可能出现的异常及解决方案. 我们借助sping强大的bean容器管理机制,通过BeanFactory轻松 ...

  2. Jquery实现日期格式化

    格式一:yyyy-MM-dd HH:mm:ss Date.prototype.format = function(format) { /* * eg:format="yyyy-MM-dd h ...

  3. css应用三

    1. Padding与margin Padding为内边距,padding值会计算在width和height之内.如:width:100px:height:100px:padding:10px:该di ...

  4. php生成批次唯一code（转）

    /** * @param int $no_of_codes//定义一个int类型的参数 用来确定生成多少个优惠码 * @param array $exclude_codes_array//定义一个ex ...

  5. jquery1.9学习笔记 之层级选择器(三)

    下一个相邻选择器(“prev + next”) 描述:选择所有给出祖先选择器的子孙选择器. 例子: <!doctype html> <html lang='zh'> <h ...

  6. Android学习笔记--Handler用法总结

    不错的例子:http://www.cnblogs.com/menlsh/archive/2013/06/07/3125341.html 转自:一叶知秋的博客 http://blog.sina.com. ...

  7. NSNumber与NSInteger的区别 -bei

    基本类型,如同C 语言中的 int 类型一样,拿来就可以直接用. 而类在使用时,必须先创建一个对象,再为对象分配空间,接着做初始化和赋值. 类的初始化,需用类自身的方法 (类方法). 代码中所创建的对 ...

  8. Activity生命周期的学习以及Logcat的使用

    http://android.blog.51cto.com/268543/322518/  Activities是由Activity stack管理的.当一个新的Activity被启动,它就会处于st ...

  9. 转摘--如何利用多核CPU来加速你的Linux命令 — awk, sed, bzip2, grep, wc等

    http://www.vaikan.com/use-multiple-cpu-cores-with-your-linux-commands/ 你是否曾经有过要计算一个非常大的数据(几百GB)的需求?或 ...

  10. Codeforces 429B Working out

    http://codeforces.com/contest/429/problem/B 题意:一个从左下到右上,一个从左上到右下,要求只相交一次,求整个路径和的最大值 思路:发现可以枚举交点,然后算到 ...