Angular-js入门

127 阅读2分钟

Angular.js是一款优秀的前端MVVM(Model View View Model)框架。诞生于2009年,后来被谷歌收购。

版本 目前最新的版本是Angular.js4.0,但本文中使用的为1.5.3,基本是通用版本。 主要是因为angularjs在2.0使用typescript的语法编写。typescript也可以说成是C#语言编写后再通过转编译成js代码的一个编译器。

##初始化

  • ng-app 在html标签中添加这个属性可以直接初始化angular.js,当然只是简单的应用。
<div ng-app>
    <p>{{ 2+3 }}</p>
</div>

在网页中显示:

5 花括号中数据会被angular识别,进行处理。

如果要进行进一步的操作,就必须要给它取个名字:ng-app="app"。 然后,js中初始化

    var app=angular.module('app',[]);

[]中是这个app的注入依赖,当需要额外的功能时可以添加,但空数组必须存在。

##作用域 在angular中有全局作用域,以及局部作用域;

  • 全局作用域通过run方法进行声明;
app.run(function($rootScope){
	$rootScope.box = '我是全局的属性'; //定义一个全局的作用域	 	
})

这种写法下传入的形参必须写死:$rootScope。 另外一种写法:

app.run('$rootScope',function(root){
	root.box = '我是全局的属性'; //定义一个全局的作用域
})

这种方式下,形参就可以随意书写;

  • 局部作用域 Angular中的局部作用域需要通过初始化一个控制器来实现; 先在html中绑定控制器;
<div class="wrapper" ng-controller="wrapper">

然后在初始化控制器;

app.controller('wrapper', ['$scope',function(scope){
	scope.name = '67';
	scope.yui = 890;
	scope.color = 'red';
}])

也可以写成:

app.controller('wrapper',function($scope){
	scope.name = '67';
	scope.yui = 890;
	scope.color = 'red';
})

与函数作用域相同,如果这个局部作用域中找不到这个属性或者方法时,它就会先在父级作用域中查找,然后一级一级往上,在全局作用域中查找;

####ng-model

表单中的变量通过ng-model来声明

<input type="text" ng-model="value">
<p>{{value}}</p>

这样改变表单值的同时,P标签的文本内容同时也改变了

####ng-repeat 可以遍历我们的dom结构 首先,写个数组:

<script>
    $scope.list = [{
	name: 1,
	age: 18
},{
	name: 2,
	age: 18
},{
	name: 3,
	age: 18
},{
	name: 4,
	age: 18
}]
</script>

item就是这个数组的每一项;

<li ng-repeat="item in list">
	{{item.name}}---{{item.age}}
</li>

结果就是这样:

  • 1---18
  • 2---18
  • 3---18
  • 4---18

如果数组值都是一样的

<script>
   $scope.arr = [1,1,1,1,1,1,1,1]
</script>

就必须在后面加入track by $index

<li ng-repeat="item in arr track by $index">
	{{item}}
</li>

结果:

  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1

####ng-click 绑定点击事件执行的函数

<button ng-click="show()">显示</button >

####ng-show 传入布尔值,是否显示元素。

<div ng-show="visible"  class="box" style="width: 200px;height: 200px;><div>

最后写个函数

<script>
        $scope.visibel=true;
        $scope.show=function(){
            $scope.visibel=!$scope.visibel;
        }
</script>