angular安装及细节注意

1.在文件目录下打开命令行对应定位到此目录执行:npm install angular

安装angular的第一个版本,默认安装的是1.0的版本,第一个版本是用js编写的,第二个版本typescript

2.我们在node_modules找angular的文件夹,拷贝这个angular.js到我们的项目文件夹里面

我们开发(调试)的时候用angular.js(未压缩的版本)

我们是发布的时候用angular.min.js(压缩的版本)

3.在html结构里面引入angular.js

src="js/angular.js">

并调试console.log(angular);如果输出的是一个对象那说明引入成功

4.首先定义第一个模块

angular.module('moduleOne',[]);

ng-app="moduleOne"是主模块的作用域跟angular.module('moduleOne',[]);

定义模块的名字格式最好是:模块名+App

ng-controller='indexA'是再划分主模块的作用域angular.module('moduleOne',[]).controller('indexA');

定义控制器的名字格式最好是:控制器名字+Ctrl

5.angular.js如果是在头部加载的话,页面就不会出现{{}}效果,如果放在后面则会,一般其实我们会把js放在后面,{{name}}相当于ng-bind="name"

6.angular.js里面使用的是驼峰原则的命名

数据从后端到前端

font-end

<-data-ajax back-end

数据从前端到后端

font-end

ajax-data-> back-end

$scope,$http,{{}} 从后端把数据渲染到前端

ng-model

ng-model可以用在input textarea select

ng-model 跟 {{}}它们两个都可以渲染值

ng-model多了一个接受输入值的功能

双向数据绑定,$scope.name改变,ng-model="name",

{{name}}

ng-model改变,其他两个也会改变

ng-click

把函数作为数据,绑定到html结构里面

html

ng-click="jk()">JK

js

$scope.jk = function(){

console.log('提交数据')

$http.get('test.php',{

params:{

name:$scope.input

}

}).success(function(data){

})

}

表达式

表达式可以算数运算,字符串拼接

{{name+name}}

表达式也支持三元表达式,相当于if()else{}

{{name?'a':'b'}}

来自<https://github.com/Wscats/Angular-news/issues/5>

Ng

-repeat:

ng-repeat="arr in arrs|limitTo:3:pageNum">{{arr.name}}

进度条的使用:range

type="range" ng-model="input" />

ng-model="input">

$rootScope的使用:

团队开发里面的思路:

每个人有该负责的模块,有相应的控制器

src="js/indexCtrl.js">

src="js/indexCtrl2.js">

注意:一旦删除其中的控制器,js里面的代码也不会执行

根作用域

Angular js根作用域:$rootScope

在控制器外定义一个值

$rootScope.title ='wowoowo';

在控制器任意地方也可以执行

它的兄弟之间也可以定义

控制与控制之间可以传递数据

文件1js:$rootScope.a = '123'

文件2js:$scope.a = $rootScope.title;

相互传递

AngularJS过滤器

转换数据:大写

方法1:{{ name|uppercase}}

方法2:$scope.name.toUpperCase()

小写

{{name|lowercase}}

处理数字价钱货币:

{{

num|currency}

{{num|number:1}}//代表精确到第几位

{{ num|currency:'¥'}}//¥12,345,00.

日期的写法:

{{data|data:'yyyy/MM/dd/hh/mm/ss/EEEE'}}\\

2017/02/15/12/15/48/Wednesday

MM:代表月份

mm:代表分钟

注意:在网上下载的时间戳要加000,加三个零,因为转换成了毫秒

过滤器

limitTo:截取的长度、截取的起始坐标

{{name|limitTo:2:1}}可以负数,负数表示从后往前截数据

也可以筛选数组,实现分页

json:里面是一个对象

{{obj|json}}相当于JSON.stringify

自定义过滤器:

App.filter('myfilter',[function($http)])

$scope是一个局部的作用域,而自定义的过滤器是全局的,所以自定义的过滤器不会出现$scope

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,583评论 0 3
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,749评论 1 21
  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 5,513评论 0 26
  • AngularJS是什么 AngularJS的官方文档这样介绍它: 完全使用JavaScript编写的客户端技术。...
    oWSQo阅读 1,304评论 0 10
  • 清晨起床,我透过窗外,外面下着细细的小雨....西成客专七工区,略显得有点安静,因为今天是一个团圆的日子,更...
    枫叶潇潇812阅读 310评论 0 0