angular(二)
- angularjs第二章
- 自定义指令
- scope
- 控制器
- AngularJS控制器控制AngularJS应用程序的数据,是常规的JavaScript对象。
- ng-controller指令就是用来定义应用程序控制器的,并且同时创建了一个新的作用域关联到相应的DOM元素上。
- 所谓作用域就是一个指向应用模型的对象,它是表达式的执行环境,作用域有层次结构,这个层次和相应的DOM几乎是一样的,作用域能监控表达式和传递事件并且可以从父作用域继承属性。
- 每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域,因为有一些指令会生成新的子作用域,当新作用域被创建的时候,他们会被当成子作用域添加到父作用域下,这使得作用域会变成一个和相应DOM结构一个的树状结构。
- 控制器上的属性:
- 现在我们就用ng-controller指令来创建一个简单的控制器定义,如下所示:
- <div ng-app=“” ng-controller=“MyController”>
- 请输入一个名字:<input type=“text” ng-model=“person.name”>
- Hello <span ng-bind=“person.name”></span>
- </div>
- <script>
- function MyController($scope) {
- $scope.person = {
- name: “yuanyingke”
- };
- }
- </script>
- 如上所述,我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性,那参数$scope是什么呢,代表什么意思呢。
- 现在我们就来解答MyController对象参数 —— $scope。
- $scope就是把一个DOM元素连结到控制器上的对象,它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象,指向应用程序作用域内的所有HTML元素和执行上下文。
- 要明确创建一个$scope对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性。
- 所有$scope都遵循原型继承,这意味着它们都能访问父$scope们,对任何属性和方法,如果AngularJS在当前$scope上找不到,就会到父$scope上去找,如果在父$scope上也没找到,就会继续向上回溯,一直到$rootScope上,这个$rootScope是最顶级的$scope,它对应着含有 ng-app指令属性的那个DOM元素,也就是说根作用域关联的DOM就是ng-app指令定义的地方。
- 也就是说,拥有了$scope,我们就可以操作作用域内任何我们想要获取的对象数据。
- 控制器上的方法:
- 控制器不仅声明属性也可以声明方法,如下所示:
- <div ng-app=“” ng-controller=“MyController”>
- 名称:
- <input type=“text” ng-model=“username”>
- <button ng-click=“sayHello()”>打招呼</button>
- <hr>
- {{greeting}}
- </div>
- <script>
- function MyController($scope) {
- $scope.username = ‘yuanyingke’;
- $scope.sayHello = function() {
- $scope.greeting= ‘Hello ‘ + $scope.username + ‘!’;
- };
- }
- </script>
- 注意事项:
- 不要试图去复用controller,一个控制器一般只负责一小块视图
- 不要在controller中操作DOM,这不是控制器的职责,是指令的职责。
- 不要在controller里做数据格式化,ng有很好用的过滤器实现此功能。
- 不要在controller里面做数据过滤操作,ng有$filter服务
- 一般来说,controller是不会互相调用的,控制器这间的交互是通过事件进行的。
- 创建指令
- <head>
- <meta charset=“UTF-8”>
- <title></title>
- <script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
- <style type=“text/css”>
- .directive{
- color:red;
- }
- </style>
- </head>
- <body ng-app=“myApp”>
- <!—<runoob-directive></runoob-directive>—>
- </body>
- <script type=“text/javascript”>
- var app = angular.module(“myApp”, []);
- app.directive(“runoobDirective”, function() {
- return {
- template : “<h1><a href=‘###’ class=‘directive’>我是a</a></h1>”
- };
- });
- </script>
- 指令定义对象的常用属性如下:
- template : string
- 使用template指定的HTML标记替换指令内容(或指令自身)
- restrict : string
- 用来限定指令在HTML模板中出现的位置。
- replace : true|false
- 使用这个属性指明template的替换方式。
- <head>
<meta charset=“UTF-8”>
<title>Title</title>
<script type=“text/javascript” src=“angular.min.js”></script>
</head>
<body ng-controller=“testController”>
<test-directive></test-directive>
</body>
<script type=“text/javascript”>
//
var app = angular.module(“myApp”,[]);
app.controller(“testController”, function ($scope) {$scope.title = “myApplication”;
});
app.directive(“testDirective”,function(){
return {
replace:true,//替换
restrict:”EA”,//限制指令的出现位置
/*
* E - 指令可以作为HTML元素使用
A - 指令可以作为HTML属性使用
C - 指令可以作为CSS类使用
M - 指令可以在HTML注释中使用
* */
template:”<div>name:{{name}}</div>”
}
});</script>
- mvvm-延伸阅读
- 简介
- 针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不同的人可能意味不同的东西 ,AngularJS并不执行传统意义上的MVC,更接近于MVVM。
- MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成,通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。
- Model将和ViewModel互动(通过$scope对象),将监听Model的变化。这些可以通过View来发送和渲染,由HTML来展示你的 代码。
- Model与MVC模式一样,Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利,例如对数据库的访问,Model不依赖于View和ViewModel,也就是说,模型不关心会被如何显示或是如何被操作,模型也不能包含任何用户使用的与界面相关的逻辑。
- ViewModel是一个用来提供特别数据和方法从而维护指定view的对象,。ViewModel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。
- Controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
- View是AngularJS解析后渲染和绑定后生成的HTML。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。
- 模块化
- 模块之间如何依赖,依赖注入
- angular.module()创建、获取、注册angular中的模块
- // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
- var createModule = angular.module(“myModule”, []);
- // 只有一个参数(模块名),代表获取模块
- // 如果模块不存在,angular框架会抛异常
- var getModule = angular.module(“myModule”);
- 该函数既可以创建新的模块,也可以获取已有模块,是创建还是获取,通过参数的个数来区分。
- angular.module(name, [requires], [configFn]);
- - name:字符串类型,代表模块的名称;
- - requires:字符串的数组,代表该模块依赖的其他模块列表,如果不依赖其他模块,用空数组即可;
- - configFn:用来对该模块进行一些配置。
- 现在我们知道如何创建、获取模块了,那么模块究竟是什么呢?
官方的Developer Guide上只有一句话:You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
模块是一些功能的集合,如控制器、服务、过滤器、指令等子元素组成的整体。 - 服务
- AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同。
- $http
- 比如,在jQuery中,我们知道它的API通过一个全局对象:$ 暴露出来,当你需要 进行ajax调用时,使用$.ajax()就可以了。这样的API很符合思维的预期。
- AngularJS也暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,但是,当你试图沿用旧经验访问angular.$http时,发现不是 那么回事!在angular中是以一个参数的形式传递到控制器中,如果要使用它,需要在 controller 中定义。
- $http服务
- <head>
- <meta charset=“UTF-8”>
- <title></title>
- <script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
- <script src=“http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js”></script>
- </head>
- <body ng-app=“myApp”>
- <div ng-controller=“myCtrl”>
- <!—{{content}}—>
- <span ng-bind-html=“content”></span>
- </div>
- <script type="text/javascript">
- var app = angular.module("myApp",['ngSanitize']);
- app.controller("myCtrl",function ($scope,$http){
- $http.get("content.html").success(function (res){
- $scope.content = res;
- });
- });
- </script>
- angular-sanitize.js
- <body ng-app=“myApp”>
- <div ng-controller=“myCtrl”>
- {{url}}
- </div>
- <script type=“text/javascript”>
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope,$location){
- console.log($location);
- // $scope.url = $location.absUrl();
- });
- </script>
- location
- 定时器
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope,$timeout){
- $timeout(function (){
- alert(‘a’);
- },2000);
- });
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope,$interval){
- //循环定时器
- $interval(function (){
- alert(‘a’);
- },2000);
- });
- 实例
- 百度下拉列表
- <body ng-app=“myApp”>
- <div ng-controller=“myCtrl”>
- {{userinfo.user}}
- </div>
- <script type=“text/javascript”>
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope,$http){
- $http.jsonp(“http://localhost/SH-2/jsonp/jsonp.php?wd=xx&callback=JSON_CALLBACK”).success(function (res){
- // console.log(res);
- $scope.userinfo = res;
- });
- });
- </script>
- 百度的接口
- <body ng-app=“myApp”>
- <div ng-controller=“myCtrl”>
- <input type=“text” ng-model=“wd” />
- <ul>
- <li ng-repeat=“x in s”>{{x}}</li>
- </ul>
- </div>
- <script type=“text/javascript”>
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope,$http){
- //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=
- $http.jsonp(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=JSON_CALLBACK”).success(function (res){
- // console.log(res);
- $scope.s = res.s;
- });
- });
- </script>
- <body ng-app=“myApp”>
- <div ng-controller=“myCtrl”>
- <input type=“text” ng-change=“change()” ng-model=“wd” />
- <ul>
- <li ng-repeat=“x in s”>{{x}}</li>
- </ul>
- </div>
- <script type=“text/javascript”>
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope,$http){
- //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&cb=
- $scope.change=function (){
- $http.jsonp(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=JSON_CALLBACK”,{
- params:{
- wd:$scope.wd
- }
- }).success(function (res){
- $scope.s = res.s;
- });
- }
- });
- </script>
- 过滤器
- 简介
- 过滤器可以使用一个管道字符(|)添加到表达式和指令中。
- AngularJS 过滤器
- AngularJS 过滤器可用于转换数据:
- 过滤器
- 描述
- currency
- 格式化数字为货币格式。
- filter
- 从数组项中选择一个子集。
- lowercase
- 格式化字符串为小写。
- orderBy
- 根据某个表达式排列数组。
- uppercase
- 格式化字符串为大写。
- html
- <body ng-app=“myApp”>
- <div ng-controller=“myCtrl”>
- <span>相乘</span>
- <input type=“text” ng-model=“num1” />
- <input type=“text” ng-model=“num2” /><br />
- <!—currency:”¥” 中文—>
- 结果为:{{myFn() | currency}}
- </div>
- </body>
- js
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope){
- $scope.num1=5;
- $scope.num2=10;
- $scope.myFn = function (){
- return $scope.num1*$scope.num2;
- }
- });
- 字体大小转换
- <body ng-app=“”>
- <div>
- <!—{{‘HelloWorld’ | lowercase}}—>
- {{‘HelloWorld’ | uppercase}}
- </div>
- 筛选
- <body ng-app=“” ng-init=“arr=[‘tangcaiye’,’zhangsan’,’lisi’]”>
- 搜索:<input type=“text” ng-model=“name” />
- <ul>
- <li ng-repeat=“x in arr | filter:name”>{{x}}</li>
- </ul>
- 筛选加排序
- <body ng-app=“myApp”>
- <div ng-controller=“myCtrl”>
- <ul>
- <li ng-repeat=“x in friends |filter:’a’ | orderBy:order:true”>{{x}}</li>
- </ul>
- </div>
- <script type=“text/javascript”>
- var app = angular.module(“myApp”,[]);
- app.controller(“myCtrl”,function ($scope){
- $scope.friends = [{name:’John’, phone:’555-1212’, age:21},
- {name:’Mary’, phone:’555-9876’, age:19},
- {name:’Mike’, phone:’555-4321’, age:10},
- {name:’Adam’, phone:’555-5678’, age:35},
- {name:’Julie’, phone:’555-8765’, age:29}];
- $scope.order=“phone”;
- });
- </script>
angular(二)的更多相关文章
- Angular(二)
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset= ...
- Angular(二) - 组件Component
1. 组件Component示例 2. Component常用的几个选项 3. Component全部的选项 3.1 继承自@Directive装饰器的选项 3.2 @Component自己特有的选项 ...
- 【Angular专题】——(1)Angular,孤傲的变革者
目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
- angular编译机制
转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 http://www.cnblogs.com/ztwBlog/p/620975 ...
- Angular 7开发环境配置
目录 前言 一.搭建项目 1.安装Angular CLI 2.创建项目 3.集成Element Angular 二.设置路由 1.创建路由模块 2.导入.导出RouterModule类 3 ...
- AngularJS的相关应用
一.[AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域.一般写在body或html上,原则上一个页面只有一个: <body ng- ...
- angular服务二
angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...
- angular学习笔记(二十九)-$q服务
angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...
- Angular组件——组件生命周期(二)
一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意 ...
随机推荐
- Nginx 1.5.2 + PHP 5.5.1 + MySQL 5.6.10 在 CentOS 下的编译安装
最近配置了几台Web服务器,将安装笔记贴出来吧.没时间像以前那样,将文章写的那样系统了,请见谅.详细配置,可以看以前的旧文章: http://blog.zyan.cc/nginx_php_v6 .安装 ...
- FreeRTOS 中断优先级配置(重要)
以下转载自安富莱电子: http://forum.armfly.com/forum.php NVIC 的全称是 Nested vectored interrupt controller,即嵌套向量中断 ...
- OpenLDAP 使用记录
导出数据: slapcat -l export.ldif
- C++中变量做数组长度
在Java中,这是完全可以的,比如我们运行如下程序: package cn.darrenchan.storm; import java.util.Arrays; public class Test { ...
- Streams:深入剖析Redis5.0全新数据结构
Streams:深入剖析Redis5.0全新数据结构 原创: 阿飞的博客 Redis 5.0 全新的数据类型:streams,官方把它定义为:以更抽象的方式建模日志的数据结构.Redis的st ...
- 对map进行排序
public class TreeMapTest { public static void main(String[] args) { Map<String, String& ...
- ubuntu 按键替换 Control_R to Left
ubuntu 按键替换 Control_R to Left 1 查看当前键盘布局 $xmodmap -pke keycode 105 = Control_R NoSymbol Control_Rkey ...
- 第二百六十四节,Tornado框架-基于正则的动态路由映射分页数据获取计算
Tornado框架-基于正则的动态路由映射分页数据获取计算 分页基本显示数据 第一步.设置正则路由映射配置,(r"/index/(?P<page>\d*)", inde ...
- 从上面的集合框架图可以看到,Java 集合框架主要包括两种类型的容器,一种是集合(Collection),存储一个元素集合,另一种是图(Map),存储键/值对映射
从上面的集合框架图可以看到,Java 集合框架主要包括两种类型的容器,一种是集合(Collection),存储一个元素集合,另一种是图(Map),存储键/值对映射.Collection 接口又有 3 ...
- redis是如何存储对象和集合的
在项目中,缓存以及mq消息队列可以说是不可或缺的2个重要技术.前者主要是为了减轻数据库压力,大幅度提升性能.后者主要是为了提高用户的体验度,我理解的是再后端做的一个ajax请求(异步),并且像ribb ...