AngularJs练习Demo2
@{
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的更多相关文章
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
- 前端 初识angularJS的基本概念
DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1 今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...
- angularjs 权威指南 版本 1.2.6
1 $rootScope run : run 方法初始化全局的数据 ,只对全局作用域起作用 如$rootScope <script src="http://apps.bdimg.c ...
- angularJS学习笔记二
angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...
- AngularJS+ThinkPHP实例教程
总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...
- 初识angularJS的基本概念
今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...
- angularJS入门小Demo【简单测试js代码的方法】
1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- angularjs $scope与this的区别,controller as vm有何含义?
壹 ❀ 引 初学angularjs的同学对于$scope一定不会陌生,scope(作用域)是将view(视图)与model(模板)关联起来的桥梁,通过controller(控制器)对于model的数 ...
随机推荐
- 【nodejs学习】3.进程管理及异步编程
进程管理 1.调用终端命令实现目录目录拷贝 var child_procress = require('child_procress'); var util = require('util'); fu ...
- iOS_SN_CoreData(二)
上一篇是讲怎么进行CoreData的基本操作,这一篇是讲NSFetchedResultsController得到CoreData数据怎么与tableView完美结合,和动画操作的实现. NSFetch ...
- php 之 类,对象
--恢复内容结束--- 一.类和对象: 1.定义: 对象:我们所见到的东西都可以称之为对象,是类实例化出来的东西 类:是对所有的同类对象抽象出来的东西 eg: 在一张表中记录了全班同学的学号,姓名,性 ...
- js定时跳转
在项目中有时会用到定时跳转,自己收藏了一个比较好用的 js写的,不依赖jQuery <script type="text/javascript"> function c ...
- Android再学习-20141023-Intent-Thread
20141023-Android再学习 Intent对象的基本概念 Intent是Android应用程序组件之一 Intent对象在Android系统中表示一种意图 Intent当中最重要的内容是ac ...
- iOS界面调试工具 Reveal-备用
Reveal是一个iOS程序界面调试工具.使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面. 对于动态或复杂的交互界面,手写UI是不可避免的.通过Reveal,我们可以方便地调试 ...
- Method Swizzling以及AOP编程:在运行时进行代码注入-备用
概述 今天我们主要讨论iOS runtime中的一种黑色技术,称为Method Swizzling.字面上理解Method Swizzling可能比较晦涩难懂,毕竟不是中文,不过你可以理解为“移花接木 ...
- 程序被送入后台后,向 iOS 借时间,完成长期任务-备
12.2.2. 方案 使用UIApplication的beginBackgroundTaskWithExpirationHandler: 实例方法.在你完成任务后,调用UIApplication的en ...
- PYTHON线程知识再研习E---条件变量同步Condition
Python提供的Condition对象提供了对复杂线程同步问题的支持.Condition被称为条件变量,除了提供与Lock类似的 acquire和release方法外,还提供了wait和notify ...
- 采购IC应该知道的十大网站
http://www.hcsindex.com (华强北指数网,查价格的)http://www.hqew.com (华强电子网,针对华强北市场)http://www.dzsc.com (维库电子 ...