src和href属性 Angularjs中src应写成ng-src，href应写成ng-href 例如：代码如下: <img ng-src="/images/cats/{{favoriteCat}}"> <a ng-href="/shop/category={{number}}">Some text</a>表达式 在模板中可以进行简单的数学运算、比较运算、布尔运算、位运算、引用数组、和对象符号等 尽管我们可以使用表达式做很多事情，但是表达式是使用一个自定义的解释器来执行的(Angular的一部分)，而不是用Javascript得eval()函数执行的，所以局...
对于一个在前端属于纯新手的我来说，Javascript都还是一知半解，要想直接上手angular JS，遇到的阻力还真是不少。不过我相信，只要下功夫，即使是反人类的设计也不是什么大的问题。 Okay，废话不多说。为了弄明白angular JS为何物，我先是从Scope开始。那么什么是Scope呢？借用官方文档的一段话：代码如下: “scope is an object that refers to the application model. It is an execution context for expressions. Scopes a...
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建议大家...
Angular2是对Angular1的一次彻底的，破坏性的更新。 相对于Angular1.x，借用某果的广告语，唯一的不同，就是处处都不同。?首先，推荐的语言已经不再是Javascript，取而代之的TypeScript，(TypeScript = ES6 + 类型系统 + 类型注解), TypeScriipt的类型系统对于开发复杂的单页Web app大有帮助，同时编译成javascript后的执行效率也比大多数手写javascript要快。有兴趣的同学可以查阅官方文档：英文传送门 |中文传送门。?得益于彻底重...
本文介绍了.Net Core + Angular2 环境搭建，具体如下： 环境搭建：1）node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0（全装最新版就好了）2）安装NTVS 1.2（node tools for vs）,TSVS dev 1.4（TS for VS）3）构建package.json，tsconfig.json，gulp.js文件1、package.json{"name": "template.angular2","version": "1.0.0","licenses": [{"type": "MIT","url": "https://github.com/angular/angular.io/blob/master/LICENSE"}],...
tab栏:代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab 标签</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .tabs { width: 400px; margin: 30px auto; background-color: #FFF; border: 1px solid #C0DCC0; box-sizing: border-box; } img { width: 400px; } .tabs nav { height: 40px; text-align: center; line-height: 40px; overflow: hidden; backgrou...
在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watch实现了页面随model的及时更新。$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。(2)watch方法用法$watch(watchFn,watchAction,deepWatch)watchFn:a...
这次给大家带来Angular Material的使用详解，Angular Material使用的注意事项有哪些，下面就是实战案例，一起来看一下。使用方法用npm下载angular-material、angular-aria、angular-animate代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="node_modules/angular-material/angular-material.css"></head><body ng-app="myApp" ng-controller="myCtrl" ...
这次给大家带来angular的scopel指令使用详解，使用angular的scopel指令注意事项有哪些，下面就是实战案例，一起来看一下。我们来创建一个自定义指令<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.primary{ background: red;} </style></head><body ng-app="myApp"><div ng-controller="mainCtrl"><my-btn></my-btn></div><script src="node_modules/angular/angular....
这次给大家带来angularJS的ng-bind-html指令详解，使用angularJS的ng-bind-html指令的注意事项有哪些，下面就是实战案例，一起来看一下。angular js的强大之处之一就是他的数据双向绑定这个功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如：$scope.text = “hello,<br><b> 这是一个例子</b>”我们用ng-bind-html这样的指令来绑定...
我们在写项目时会遇到启动页调到引导页，引导页再调到首页，那我们在用angular框架写这种东西的时候如果我们不细心的话就会遇到问题，比如说找不到引导页的图片等等。那我们怎么解决这个问题呢？首先我们要明确，我们使用的angular框架所以我们应该使用angular中的框架来解决这个问题，而不是还是按照原来的思想按部就班的使用路径跳转。下面我们就来看一下，1、启动页跳到引导页app.controller("zeroController",function ($timeo...
最近想做一款跨平台（pc\app\pad）的东西玩玩,研究了许多技术：android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程序除android、ios 本身的枷锁（系统）其它 的都 可以实现跨平台，尤其ApiCloud、微信小程序做开发sdk级解决方案很是火热，但是从技术主权上讲太依赖人家的东西，H5 、bootstrap 在响应式相当优秀，前后端框架基本可以承包 。当然还有很多 前端框架 如vue.js 等等。不知道why,目前对angular产生兴趣，...
AngularJS有几大特性，比如： 1 MVC 2 模块化 3 指令系统 4 双向数据绑定那么本篇就来看看AngularJS的模块化。 首先先说一下为什么要实现模块化： 1 增加了模块的可重用性 2 通过定义模块，实现加载顺序的自定义 3 在单元测试中，不必加载所有的内容 之前做的几个例子，控制器的代码直接写在script标签里面，这样声明的函数都是全局的，显然不是一个最好的选择。 下面看看如何进行模块化： <s...
{ "rulesDirectory": [ "node_modules/codelyzer" ], "rules": { "arrow-return-shorthand": true, // 允许使用箭头函数返回的简略写法 "callable-types": true, // 只有调用签名的接口或文字类型可以写为函数类型 "class-name": true, // 类名采用帕斯卡命名法 "comment-format": [ // 行注释双斜杠后注释内容前加一个空格 true, "check-space" ], "curly": true, // if/for/do/while 条件语句加花括号 "deprecation": { // "seve...