@{

     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. linux分区和系统文件和挂载

    要以root用户进入 .查看磁盘情况 lsblk .进行分区 sudo cfdisk /dev/sda 在空闲资源的地方新建分区,然后一步步的走下来就行了,最后选择write,然后quit 重启 .创 ...

  2. ORACLE的order by中文排序

    在使用order by排序的时候,出现如下情况:   印象中中文排序应该默认是按照拼音排序的,为何"鑫"会排在"中"的后面呢?猜想order by是不是根据对应 ...

  3. Asp.Net--回调技术

    实现回调技术需要以下步骤: 1.实现ICallbakEventHandler 2.实现接口中的方法:RaiseCallbackEvent 3.实现GetCallbackResult 方法 解释 参数 ...

  4. Activiti工作流学习-----基于5.19.0版本(2)

    二.activiti.cfg.xml的其他bean节点配置 2.1 新特性:Job Executor和Async Executor 从5.17.0版本的activiti开始提供作业执行者(Job Ex ...

  5. Jetty开发(2)

    部署web应用 配置了部署模块的Jetty服务器实例能够在webapps目录下热部署web应用.在webapps目录下标准的War包和jetty的配置文件能够被热部署进服务器需要符合下述规则: exa ...

  6. Intent系列讲解---Intent简介以及相关属性

    一.Intent简介 Intent中文是"意图,意向",它是Android中四大组件通讯的纽带,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Androi ...

  7. Codeforces 538E Demiurges Play Again（博弈DP)

    http://codeforces.com/problemset/problem/538/E 题目大意: 给出一棵树,叶子节点上都有一个值,从1-m.有两个人交替从根选择道路,先手希望到达的叶子节点尽 ...

  8. 宏汇编软件MASM51的使用

    单片机开发可以用手工汇编和机器汇编两种方法.采用手工汇编就是先编写出汇编程序,然后对照单片机汇编表手工将汇编程序翻译成机器码,最后将机器码一个一个地送入开发仿真器的RAM中去进行调试. 由于采用手工汇 ...

  9. SSH自动部署（转）

    我的是windows环境,目前开发的过程中,有些项目需要一下子部署到很多的linux服务器上.写了个脚本能够自动上传文件和执行部署任务.完成这个任务需要的条件包括SSH配置和一个执行脚本. 准备 1. ...

  10. pidof,pgrep进程名查PID, /proc目录由pid查进程名

    pidof,pgrep进程名查PID cat /proc/4990/status|grep "name",由pid查进程名