@{

     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. eclipse 插件 最新 eclipse4.x 插件

    Properties  Editor:  中文显示属性配置文件 help ——> install new  SoftWare ——>add Name: xx Location: http: ...

  2. ul li span addClass removeClass

    <link type="text/css" href="./style/css/base.css" rel="stylesheet"& ...

  3. MySql用statement实现DDL,DML,DQL的操作Demo

    Demo1 Connection connection=null; Statement stmt=null; int result=-1; try { Class.forName("com. ...

  4. java学习笔记（3）：java的工作原理及相关基础

    一.运行机制 如上图所示,图中内容即为Java的运行机制: 1.我们一开始所编写的代码文件存储格式为(如text.java)文件,这就是源程序文件 2.在Java编辑器的作用下,也就是就行了编译,形成 ...

  5. C/C++中逗号表达式的用法

    代码: #include <cstdio> #include <iostream> using namespace std; int main(){ int t1,t2; t1 ...

  6. 【Oracle】-【权限-ORA-04043】- ORA-04043: object "SYS"."V_$DATABASE" does not exist

    用非dba账号(但赋予了DBA角色)登录一个新的10g数据库想看下版本号, SQL> desc v$instance; ERROR: ORA-04043: object "SYS&qu ...

  7. Jquery简略API使用

    都是个人随手笔记,既然开通了博客园就分享给大家.谨做为参考,具体大家自己测试以及使用 ★ $() ★ JQ的一个万能获取对象的函数(获取跟CSS获取元素是一样的)$(function(){}); 替代 ...

  8. IIS下 Yii Url重写

    下载URL重写组件 http://www.microsoft.com/zh-cn/download/details.aspx?id=7435 导入官方提供的.htaccess文件 Options +F ...

  9. ROW_NUMBER()/RANK()/DENSE_RANK()/ntile() over()

    ROW_NUMBER()/RANK()/DENSE_RANK()/ntile() over()   今天女票问我SqlServer的四种排序,当场写了几句Sql让她了解,现把相关Sql放上来. 首先, ...

  10. Spring security oauth2最简单入门环境搭建

    关于OAuth2的一些简介,见我的上篇blog:http://wwwcomy.iteye.com/blog/2229889 PS:貌似内容太水直接被鹳狸猿干沉.. 友情提示 学习曲线:spring+s ...