厦门网站建设中的AngularJS模块

2018.04.18 |
标签

厦门网站建设中的AngularJS模块


  厦门网站建设中的AngularJS模块支持模块化的方法。模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式。在这个例子中,我们要创建两个模块。

 

  Application Module-用于初始化控制器应用程序

 

  Controller Module-用于定义控制器


  在这里,厦门网站建设已经声明使用angular.module功能的应用程序mainApp模块。我们已经通过了一个空数组给它。此数组通常包含从属模块。


  在这里,厦门网站建设已经声明采用studentController模块的mainApp.controller功能的控制器。

 

  在这里,厦门网站建设使用ng-app指令和控制器采用ng-controller指令应用模块。我们已经在主要的HTML页面导入mainApp.jsstudentController.js



厦门网站建设


 

  厦门网站建设的例子将展示上述所有模块。

 

  testAngularJS.htm

 

  <html>

 

  <head>

 

  <title>Angular JS Modules</title>

 

  <style>

 

  table,th,td{

 

  border:1px solid grey;

 

  border-collapse:collapse;

 

  padding:5px;

 

  }



厦门网站建设公司


 

  table tr:nth-child(odd){

 

  background-color:#f2f2f2;

 

  }

 

  table tr:nth-child(even){

 

  background-color:#ffffff;

 

  }

 

  </style>

 

  </head>

 

  <body>

 

  <h2>AngularJS Sample Application</h2>

 

  <div ng-app="mainApp"ng-controller="studentController">

 

  <table border="0">

 

  <tr><td>Enter first name:</td><td><input type="text"ng-model="student.firstName"></td></tr>

 

  <tr><td>Enter last name:</td><td><input type="text"ng-model="student.lastName"></td></tr>

 

  <tr><td>Name:</td><td>{{student.fullName()}}</td></tr>

 

  <tr><td>Subject:</td><td>

 

  <table>

 

  <tr>

 

  <th>Name</th>

 

  <th>Marks</th>

 

  </tr>



厦门网站建设


 

  <tr ng-repeat="subject in student.subjects">

 

  <td>{{subject.name}}</td>

 

  <td>{{subject.marks}}</td>

 

  </tr>

 

  </table>

 

  </td></tr>

 

  </table>

 

  </div>

 

  <script src=https://www.yiibai.com/angularjs/"http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

 

  <script src=https://www.yiibai.com/angularjs/"mainApp.js"></script>

 

  <script src=https://www.yiibai.com/angularjs/"studentController.js"></script>

 

  </body>

 

  </html>  

 

  转载请注明:厦门网站建设:http://www.mfadj.com/newsshow-128.html


相关推荐

最新文章

热门推荐

联系电话 400-6065-301

微信咨询 寒总监