AngularJS使用总结

1、标签
ngApp：
是一种简单的、通用的方式启用Angularjs应用，一般我们放在 body 或 html 标签上面，这样我们就可以开始使用Angularjs了。
angular.module（）：创建、获取、注册angular中的模块。
angular.module(name, [requires], [configFn]);

name：字符串类型，代表模块的名称；

requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；

configFn：用来对该模块进行一些配置。

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
var createModule = angular.module(“myModule”, []);

// 只有一个参数(模块名),代表获取模块
// 如果模块不存在,angular框架会抛异常
var getModule = angular.module(“myModule”);

// true,都是同一个模块
alert(createModule == getModule);
controller：
在Angular中，控制器就像 JavaScript 中的构造函数一般，是用来增强 Angular作用域(scope) 的。

当一个控制器通过 ng-controller 指令被添加到DOM中时，ng 会调用该控制器的构造函数来生成一个控制器对象，这样，就创建了一个新的子级 作用域(scope)。在这个构造函数中，作用域(scope)会作为$scope参数注入其中，并允许用户代码访问它。

一般情况下，我们使用控制器做两件事：

初始化 $scope 对象 为$scope 对象添加行为（方法）
从这个解释中可以看出，在angularJS中Controller是有作用域的，它的作用域就是它所附加的DOM标签域，其次Controller是为域对象$scope提供对象及方法，从而实现它所在的作用域内的DOM标签的双向绑定或事件处理。 var loginApp = angular.module(“loginApp”, []); loginApp.controller(‘LoginCtrl’, function ($scope, $http) {$scope.UserInfo={
UserName:”admin”,
Password:”admin”
}
$scope.Login=function() {$http.post('/account/login', $scope.UserInfo).success(function (data,status) {
console.log(‘登录成功’);
}).error(function (data,status) {
console.log(‘登录失败’);
});

}  

});
Controller的创建的第一参数是Controller的名称，后面的functions是它个一个构造函数，因为这个congroller需要使用$scope,$http,所以这个构造函数注入了两个angular的服务。
filter：在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。
$scope 参数：用于设置对应html表单中的参数值。 html： js:$scope.searchCourse = function (searchTerm) {
if ($scope.currentPage === 1) { doCoursesQuery($scope, Courses);
} else {
$scope.currentPage = 1;
}
};

$routeParams 路由里可以有参数,只要将when()的第一次参数写成类似’/users/:user_id’这样就行了,AngularJS会把它解析出来并传递给$routeParams.
例子：
when(‘/livecourses/:id/:operate’, {
templateUrl: ‘partials/livecourse/livecourses-create.html’,
controller: ‘LiveCoursesCreateOrEditCtrl’
这样在controller中引入$routeParams,就可以通过$routeParams.operate获得operate的值，然后通过$scope.operate =$routeParams.operate，传递给HTML页面。

2、使用总结

• 下拉列表搜索使用：
  代码：text: value.name：
  text是teacher属性，用于在selectTeacherOptions框内显示数据。

  • 前端：html

<div class="form-group">
                    <label class="control-label" for="livecourseSpeakerListInput">讲师</label>
                    <div class="controls">
                        <input type="hidden" required name="teachers" ng-model="livecourse.speakerList"
                               ui-select2="selectTeacherOptions" >
                    </div>
                </div>

 - js：

        $scope.selectTeacherOptions = {
            width: '100%',
            height: '35px',
            allowClear: false,
            openOnEnter: false,
            allowAddNewValues: false,
            maximumSelectionSize: 5,
            placeholder: '选择讲师...',
            multiple: true,
            initSelection: function (element, callback) {
                var results = [];
                $.each($scope.livecourse.speakerList, function (index, teacher) {
                    results.push({
                        id: teacher.id, realName: teacher.text
                    });
                });
                callback(results);
            },
            query: function (options) {
                var qp = {};
                if (options.term) {
                    qp.keyword = options.term;
                }
                qp.status = 1;
                var results = [];
                $scope.$apply(function () {
                    Teachers.query(qp, function (data) {
                        if (data.data.result) {
                            angular.forEach(data.data.result, function (
                                    value, key) {
                                results.push({
                                    id: value.id,
                                    text: value.name
                                });
                            });
                            options.callback({
                                more: false, context: '', results: results
                            });
                        }
                    });
                });
            }