@{

     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. 初学Java ssh之Spring 第四篇

    今天我来学习学习Spring中Bean. 在Spring中原来还有<beans.../>标签啊,它相当于<bean.../>标签的老爸,老爸可以有很多个儿子,但是老爸只有一个哦 ...

  2. 解决表格里面使用text-overflow后依旧不能隐藏超出的文本

    解决表格里面使用text-overflow后依旧不能隐藏超出的文本 来源: http://blog.csdn.net/colinmuxi/article/details/9069595  (非原创,自 ...

  3. swift中的&-备

    参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以引用方式传递,这也是可以实现的,Swift提供 ...

  4. Qt也有垃圾回收（通过QScopedPointer实现），下决心在项目里使用QScopedPointer，省了太多事情了，而且更安全！！

    也谈Qt的垃圾回收 前几天在做代码审核的时候,Kai Uwe Broulik建议使用QScopedPointer来替代手工内存管理,使用后发觉确实节约了不少代码量,我的CHERRY可以延长寿命了!但是 ...

  5. C++中，如何在标准库的std::string和常用库（Qt，VC等）的QString之间进行选择？

    假设一个场景:在写GUI程序的时候,如果GUI库和STL都提供了某个功能(比如容器字符串),应该如何在两个库之间选择? 做法是分层,比如分为frontend+core.开发core的时候只用STL,保 ...

  6. 关于NSIS脚本的Demo

    这个NSIS脚本是打包公司的整个Release项目工程. 用NSIS编译器编译下就可以了. ; Script generated by the HM NIS Edit Script Wizard. ! ...

  7. 【转】Excel快捷键大全

    原文网址:http://www.bm8.com.cn/keyboard/excel.asp 显示和使用"Office 助手"注意 若要执行以下操作,"Microsoft ...

  8. MVC4.0系统开发新手历程（四）数据列表查询

    任何系统都不可避免的就是数据的查询展示,我觉得这里最值得一说的就是分部视图以及数据分页了 首先添加控制器 在控制其上面的名字为Index的Action上面右击,添加视图即可添加对应的视图,分部视图呈现 ...

  9. 为什么新建的管理员账号权限没有Administrator大？

    Administrator是超级管理员,UAC不用确认,跟关了一样. 新建隶属于administrator组的用户,可以关掉UAC. 控制面板>系统和安全>操作中心>更改用户帐户控制 ...

  10. 2015.11.27初识java一集简单的java小程序

    JAVA配置环境变量方法: 1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME变量值:D:\Java\jdk1.7.0_ ...