Angularjs 基础及入门学习

1 MVVM：数据变化引起视图变化，视图变换引起数据变化，实现双向绑定

2 AngularJS（$scope 作用域，相当于Java 的this关键字）

3 创建流程：

定义模块：var app = angular.module('app',[引入的包])； 

将模块绑定到DOM:ng-app="app"；

创建controller：var testController = angular.controller('TestController',{'$scope','$http',function ($scope,$http){$scope.name="test"}}，该函数实现了数据模型与DOM的绑定);

绑定Controller到DOM：ng-controller = TestController;输入数据：1{{name}}2 加入<lable ng-bind="name"> <inpur ng-model="name">ng-ng-modle代表双向数据绑定，ng-bind代表单向数据绑定。

4基本操作：循环：（绑定规则：以ng-开头，例如ng-click=“”，ng-repeat=""）

        <ul ng-controller="RepeatController">

<li ng-repeat="person in list">姓名：{{person.name}} 部门：{{person.dept}}</li>

</ul>

     显示和隐藏：ng-show 和ng-hide

    操作css类：ng-class

5  创建Service：var testService = angular.service("api",{"$http",function($http){

             $http({

                       url:url,

                       type:"POST OR GET"

                       data:{},

}).then(function(result)

{list = result.data;},function());

}});

(factory与service功能类似)

后台获取数据：var testController = angular.controller('TestController',{'$scope','$api',function ($scope,api){$scope.name="test"}}

6 路由功能实现：定义模块，引入第三方插件，注入第三方service，编写controller，使用app.config进行配置，例如：

<!--

学习步骤

第一步：实现路由

1. 引入<script type="text/javascript" src="../jslib/angular/plugins/angular-ui-router.min.js"></script>路由插件

API:https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router

2. 定义模块并绑定

var app = angular.module("app", ["ui.router"]);

3. 在模块配置方法中定义路由规则

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){

$stateProvider

//主页

.state("main", {

url : "/main",

template : "<div>{{title}}</div><br>" +

"<a href='javascript:void(0)' ui-sref='page1'>进入页面1</a><br>" +

"<a href='javascript:void(0)' ui-sref='page2'>进入页面2</a>",

controller : "MainController"

})

.state("page1", {

url : "/page1",

template : "<div>{{title}}</div><br>" +

"<a href='javascript:void(0)' ui-sref='main'>返回首页</a>",

controller : "Page1Controller"

})

.state("page2", {

url : "/page2",

template : "<div>{{title}}</div><br>" +

"<a href='javascript:void(0)' ui-sref='main'>返回首页</a>",

controller : "Page2Controller"

});

$urlRouterProvider.otherwise('/main');

}]);

4. 为所有的路由定义controller

app.controller("MainController", ["$scope", function($scope){

$scope.title="这是MAIN页面";

}]);

app.controller("Page1Controller", ["$scope", function($scope){

$scope.title="这是页面1";

}]);

app.controller("Page2Controller", ["$scope", function($scope){

$scope.title="这是页面2";

}]);

5. dom层启用路由

第二步：不使用ui-sref，改用js来切换页面

1. 在MainController中定义跳转的方法。$state.go()

2. 在超链接中使用ng-click触发方法。

第三步：切换页面时的参数传递

1. 修改路由规则，添加参数的定义；params:{}

2. 跳转时传递参数；

3. 跳转后接收参数；$stateParams

 -->

8.级联下拉框的实现，变量的监听

9 指令的介绍，自定义代码

一、$scope和$rootScope的区别

$rootScope针对全局的作用域生效

$scope只针对当前的controller作用域生效

二、AngularJS模块的run方法

run方法初始化全局的数据，只对全局作用域起作用 如$rootScope

<script type="text/javascript">

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

  m1.run(['$rootScope', function ($rootScope) {

    $rootScope.name = 'hello';

  }]);

</script>

 三、依赖注入中代码压缩问题

定义一个Controller，通常方法是如下代码，但是代码压缩的过程中function里面的参数有可能会变化，$scope有可能会变成$sc,或者是其他(这里的变化不可控制)，一旦变化，下面绑定的值就会出错。

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

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

  $scope.name = '张三';

});

为了解决这个问题，在function外面加[],传入字符串，如下代码所示，因为字符串在压缩的过程中不会改变。

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

app.controller('firstController', ['$scope', function ($scope) {

  $scope.name = '张三';

}]);

也就是说，function前加入字符串的原因是为了保证代码压缩的过程中，传入的参数不会变化