angular-tutorial

angular-tutorial copied to clipboard

# ng-repeat绑定事件 下面的代码会根据你点击的数字变成红色，这里我们在ng-repeat渲染完成后绑定事件，注意一定是要DOM完全渲染后再去绑定，不然事件会绑定失败 重点就是加上在组件中加上这个DOM的完全渲染完成的判断 ``` if (scope.$last) { // 这个判断意味着最后一个元素渲染完成 //scope.$eval(attr.chooseItem) // 执行绑定的表达式 } ``` 全部代码 ``` {{name}} {{item}} var app = angular.module('wsscat', []); app.controller('indexCtrl', function($scope) { $scope.name = "wsscat"...

Wscats

求指教阿！！

1

请问有没angular2的学习资料，或者资源

fangqikuai

过滤器

2

## 自定义过滤器 我们可以使用filter函数自定义一个过滤器，filter函数的第一个参数是过滤器到时候再DOM中要使用的名字，第二个参数是定义一个执行过滤操作的函数，返回的要是一个函数 ``` app.filter("wsscat",function(){ var func = function(input, bool){ var out; console.log(input); console.log(bool); } return func; }) ``` 我们就可以在DOM中使用这个过滤器，这里执行的时候会输出text的值，过滤器中的返回函数第一个参数就是我们传进去的text值，第二个参数是传递一个值，可以是布尔值，字符串，数字等等 `{{text|wsscat}}` `{{text|wsscat:true}}` 所以打印的结果为 ``` console.log(input);//text的值 console.log(bool);//true ``` ## 在控制器中使用过滤器服务 往控制器中注入$filter服务...

Wscats

## 简介 MVC是一种使用 MVC（Model View Controller 模型-视图-控制器）设计模式，该模型的理念也被许多框架所吸纳，比如，后端框架(Struts、Spring MVC等)、前端框架(Angular、Backbone等)。在学习angular的过程中，我在网上查找关于angular MVC介绍的文章很少，有些文章也没有很直白地为初学者指明angular MVC到底是啥样貌，因此，今天我们就来谈谈MVC模型在angular的形态。 为了介绍angular MVC模型，我建立一个最简单的例子。该例子的启动展示结果为：  下面我会逐一解释。 ## view view指的是视图，在web前端工程中，view往往指的是HTML代码。 ``` Title 模型数据: ``` ## model model指的是模型数据，在java后端开发中，我们常常使用java为业务数据单独建模，然而，在前端中，我们也可以为数据建立模型。比如，下面的代码片段。 ``` var book = { title:...

Wscats

[Angular常犯的十个错误](http://blog.jobbole.com/78946/)

Wscats

angular面试题

3

**解释下什么是 $rootScrope 以及和 $scope 的区别** $rootScrope 页面所有 $scope 的父对象 Angular解析 ng-app 然后在内存中创建 $rootScope 带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数中变有一个$scope对象实例 **Angular Directive中restrict 中分别可以怎样设置** restrict中可以分别设置: - A 匹配属性 - E 匹配标签 - C 匹配class - M 匹配注释...

Wscats

directive demo

1

angular组件写的轮播图 用``标签进行复用 **index.html** ``` {{text}} var app = angular.module('wsscat', []); app.controller('indexCtrl', function($scope) { $scope.text = "轮播图" $scope.images = ['denglu.png'] }) app.directive('swipe', function($interval) { return { templateUrl: 'template.html', link: function(scope, elm,...

Wscats

service demo

2

``` * { margin: 0; padding: 0; } canvas { width: 100%; height: 500px; } start clear var app = angular.module('wsscat', []); app.controller('homeCtrl', function($scope) { $scope.first = 20; $scope.second =...

Wscats

ng-animate

2

[让你的 AngularJS 应用动起来:ngView](http://www.oschina.net/translate/animating-angularjs-apps-ngview) [AngularJS ngView Animation Effects](http://dfsq.github.io/ngView-animation-effects/app/#/code) [ngAnimate官方文档](https://docs.angularjs.org/api/ngAnimate)

Wscats

[汇智](http://man.hubwiz.com/manual/AngularJS) [官方API文档](https://docs.angularjs.org/api/ng/service)

Wscats