Angular学习笔记(1)

AngularJS通过ng-app来确认容器,开发时通常将ng-app定义在最外层。

AngularJS会从获取到ng-app标签的地方开始向下遍历找寻AngularJS中定义的属性信息并处理,如将input获取的值赋给ng-model中定义的变量中,并在下面存在{{变量}}的时候显示出变量值信息。

ng-init:初始化数据的指令。

ng-init指令对应的属性值就是我们要初始化的数据,定义方式跟js中定义变量的方式一样。

ng-init使用方法:<body ng-app ng-init="msg='hello'">在ng-app的定义域中就存在了msg=‘hello’的变量

同时插入多条变量中间用;隔开,如:<body ng-app ng-init="msg='hello';data='World!'">(注意不能使用,隔开)

ng-bind:插值使用(为元素绑定一个内容值属性值是要被渲染的内容)

ng-bind用来代替{{变量名}}如:<p>{{msg}}</p>显示变量值可以使用<p ng-bind="msg"></p>来代替(这样做可以使页面重加载时不显示插值符号{{msg}})

在Angular.js中定义变量:

1.获取应用程序。

2.创建一个作用域,在作用域中定义这些变量。

创建作用域用ng-controller指令

首先修改代码即ng-app=“MyApp”之后在js中通过MyApp标识即可拿到这个容器

定义ng-controller=“myController”之后在js中通过myController标识即可拿到该控制器

对象中有一个方法教controller,通过这个方法我们可以将页面中的控制器拿到js中

接收两个参数

第一个参数表示控制器名称

第二个参数表示控制器处理函数,通常在这个函数中定义作用域变量

作用域是一个空对象,通过它我们什么也做不了。

参数是一个空数组,什么都没有,因此我们在函数中什么也干不了

那么我们想定义变量我们就要获取作用域,但是通过this,arguments都获取不到

于是Angular提供了一个技术叫做参数注入,我们想用什么功能,直接在参数里传递。

想使用作用域,可以直接在参数中传递过来,Angular作用域相当于一个内置的服务Angular内置服务有个特点都是以$开头的

作用域服务名称叫做$scope

在作用域中定义变量,通过$scope.语法定义。

参数注入如下

app.controller('myCtrl',function($scope){


})

此时就将myCtrl控制器得到了并且在其中可以定义myCtrl中的内含变量

例如:

<div id="app" ng-controller="myCtrl">
    <input type="text" ng-model="msg">
    <p>{{msg}}</p>
    <h1 ng-bind="data"></h1>
   </div>

存在msg与data两个变量给这两个变量赋值可以在刚刚获得的控制器中这样写

app.controller('myCtrl',function($scope){
    $scope.msg='hello';
    $scope.data='World';
   
    })

这样就给msg与data变量附了值

对之前ng-init、ng-app、ng-controller的解释

ng-app定义了一个总作用域而ng-init相当于在总作用域里面进行了赋值,ng-controller则相当于在ng-app中定义了一个子作用域


猜你喜欢

转载自blog.csdn.net/qq_31404603/article/details/53139170
今日推荐