一般常用的两种是ng-style跟ng-class
1、ng-style
ng-style 指令为 HTML 元素添加 style 属性。
ng-style 属性值必须是对象，表达式返回的也是对象。
对象由 CSS 属性和值组成，即 key=>value 对。
例如：
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">菜鸟教程</h1>
<script>
var app = angular.module("myApp", [])
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
})
</script>
</body>
2、ng-class
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class 指令的值可以是字符串，对象，或一个数组。
如果是字符串，多个类名使用空格分隔。
如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
例如：
<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
控制器模块化
指令模块化
过滤器模块化
服务模块化
定义值模块化
使用模块工作
第一步：创建一个模块
// function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar myApp = angular.module("exampleApp", ["exampleApp.Controllers", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])在视图中应用模块
<!-- use module --><html ng-app="exampleApp"> ...</html>第二步：定义值
var valueModule = angular.module("exampleApp.Values", [])// defind valuevar now = new Date()valueModule.value("nowValue", now)第三步：定义服务
var serviceModule = angular.module("exampleApp.Service", [])// function : define a service named daysserviceModule.service("days", function (nowValue) { this.today = nowValue.getDay() this.tomorrow = this.today + 1 })第四步：定义控制器
var controllerModule = angular.module("exampleApp.Controllers", [])// function : define a controller named dayCtrl// the controller include two param:// param detail:// param one : name of controller// param two : a factory function// the param $scope of factory function show information to viewcontrollerModule.controller("dayCtrl", function ($scope, days) { // days : use custom service // today is ... $scope.day = days.today // tomorrow is ... $scope.tomorrow = 7})将控制器应用于视图
<!-- use controller --> <div class="panel" ng-controller="dayCtrl"> <div class="panel-header"> <h3>Angular App</h3> </div> <!-- if the day is undefined, show unknow --> <!-- use filter and data binding --> <h4>Today is {{ day || "unknow" }}</h4> <h4>Tomorrow is {{ tomorrow || "unknow" }}</h4> </div>第五步：定义指令
var directiveModule = angular.module("exampleApp.Directives", [])// function : define a directive named highlight// it accepts two param// param one : the name of directive// param two : a factory methoddirectiveModule.directive("highlight", function ($filter) { // get the filter function var dayFilter = $filter("dayName") // param detail: // scope : view scope of action // element : the element which uses the custom directive // attrs : the attrs of the element return function (scope, element, attrs) { // console.log(dayFilter(scope.day)) if (dayFilter(scope.day) == attrs['highlight']) { element.css("color", 'red') } } })将指令应用于视图
...<h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4>...第六步：定义过滤器
var filterModule = angular.module("exampleApp.Filters", [])// function : define a fitler named dayNamefilterModule.filter('dayName', function () { var dayNames = ['Sunday', "Monday", 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday'] return function (input) { // input is the value of data binding return angular.isNumber(input % 7) ? dayNames[input % 7] : input % 7 }})将过滤器应用于视图
<!-- 用 | 分开 --><h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4><h4>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h4>最后，下面是完整的代码：
文件一：example.html
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angluar test</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" ></head><body> <!-- use controller --> <div class="panel" ng-controller="dayCtrl"> <div class="panel-header"> <h3>Angular App</h3> </div> <!-- if the day is undefined, show unknow --> <!-- use defined directive "highlight" --> <!-- use filter and data binding --> <h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4> <h4>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h4> </div><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="values/exampleValue.js"></script><script type="text/javascript" src="controllers/exampleController.js"></script><script type="text/javascript" src="filters/exampleFilter.js"></script><script type="text/javascript" src="directives/exampleDirective.js"></script><script type="text/javascript" src="services/exampleService.js"></script><script type="text/javascript">// function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar myApp = angular.module("exampleApp", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])</script></body></html>文件二：services/exampleService.js
var serviceModule = angular.module("exampleApp.Service", [])// function : define a service named daysserviceModule.service("days", function (nowValue) { this.today = nowValue.getDay() this.tomorrow = this.today + 1 })文件三：values/exampleValue.js
var valueModule = angular.module("exampleApp.Values", [])// defind valuevar now = new Date()valueModule.value("nowValue", now)文件四：directives/exampleDirective.js
var directiveModule = angular.module("exampleApp.Directives", [])// function : define a directive named highlight// it accepts two param// param one : the name of directive// param two : a factory methoddirectiveModule.directive("highlight", function ($filter) { // get the filter function var dayFilter = $filter("dayName") // param detail: // scope : view scope of action // element : the element which uses the custom directive // attrs : the attrs of the element return function (scope, element, attrs) { // console.log(dayFilter(scope.day)) if (dayFilter(scope.day) == attrs['highlight']) { element.css("color", 'red') } } })文件五：controllers/exampleController.js
var controllerModule = angular.module("exampleApp.Controllers", [])// function : define a controller named dayCtrl// the controller include two param:// param detail:// param one : name of controller// param two : a factory function// the param $scope of factory function show information to viewcontrollerModule.controller("dayCtrl", function ($scope, days) { // days : use custom service // today is ... $scope.day = days.today // tomorrow is ... $scope.tomorrow = days.tomorrow})文件六：filters/exampleFilter.js
var filterModule = angular.module("exampleApp.Filters", [])// function : define a fitler named dayNamefilterModule.filter('dayName', function () { var dayNames = ['Sunday', "Monday", 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday'] return function (input) { // input is the value of data binding return angular.isNumber(input % 7) ? dayNames[input % 7] : input % 7 }}) angular对移动端来说，还是太重了。js的按需加载考虑使用requirejs或者seajs。
css的按需加载只能按模块拆成一个个css，然后按需引用。看模块粒度。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）