angularjs 模块化 css怎么写

angularjs 模块化 css怎么写,第1张

控制器模块化

指令模块化

过滤器模块化

服务模块化

定义值模块化

使用模块工作

第一步:创建一个模块

   // 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,然后按需引用。看模块粒度。

既然是路由规则势必单个视图都是以围绕一次性加载的主页面区域里的view切换显示,view下显示的页面都被定义成模板,如果非要指定每个视图的css你class名字去区分就好了,而且既然是路由规则肯定是要一次性加载引入的js与css文件就够了呀


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11473099.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存