AngularJS筆記---路由視圖

時間 2019-11-26

原文原文鏈接

　　　最近有同事提到過關於ng-view的使用, 其實本身也不懂了,因爲最近一直在作AngularJs的Rearch,因此就看了一些關於ng-view的國外博客. 作過ASP.NET MVC4的都知道, 咱們會有一個對應的controller和views,還有一個routerconfig. 其實在AngularJS也有相似的東西。下面我會按照Asp.net的MVC框架搭建一個AngularJs的小Demo出來.html

一.建立文件目錄:git

A. Controller文件夾放ng-controller的代碼github

B.JS 放置應用的外部JS 文件跨域

C. Views 放置展現的HTML文件app

D. index.html 放置默認頁面, rounteConfig設置路由cors

二. 如何設置路由框架

2.1 設置路由.ide

經過$routeProvider實現, when表示當前uri地址, templateUri實際加載顯示的html地址，controller是加載的模板對應的ng-controller模塊.spa

angular
  .module('myapp', [
    'ngRoute'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'       
      });
  });

　　　　 2.2 index.html編寫.net

此頁面實現了頁面/main和/about的跳轉. 上面的routeConfig.js文件會監控到目前訪問的uri,而後加載對面的templateUri模板顯示在下面

Notes: 1. 注意引用 angular-route.js文件

2. 注意連接請使用ng-href,切記別使用href, ng-href會自動將當期文件目錄加上, 若是用href='/about' 就會自動變爲電腦盤符:/about了.

<!DOCTYPE html>
<html>
<script src='js/angular.js'></script>
<script src='rounteConfig.js'></script>
<script src='js/angular-route.js'></script>
<script src='Controller/about.js'></script>
<script src='Controller/main.js'></script>
<head>
    <title></title>
</head>
<body>
   <div ng-app="myapp">
       <div>
            <a ng-href="#/">main</a>|<a ng-href="#/about">about</a>
       </div>
       <div ng-view=''></div>       
   </div>
</body>
</html>

三. Views和Controller的設置.

3.1 咱們能夠在Views裏面建立main.html 和 about.html文件.

Notes:由於是用模板的形式添加到index.html裏面因此這裏的html不須要引用任何Angularjs的js文件,只須要在index.html裏面加載便可

<h1> Main page:{{message}}</h1>  // main.html

<h1>About page:{{message}}}</h1> // about.html

3.3 在Controller文件夾裏面添加main.js和about.js文件

angular.module('myapp')
  .controller('AboutCtrl', function ($scope) {
       $scope.message = 'I am frank, I am a DouBi'
  });

angular.module('myapp')
  .controller('MainCtrl', function ($scope) {
          $scope.message = "I am a .net coder, working for an USA-Online shopping mall";
  });

四.運行:

前面三節就算代碼結束了, 因而咱們能夠開開心心點擊index.html來看效果了. 但是坑人的咱們會遇到一個跨域問題.

五. Http-Server

出現了跨域問題,下面小編介紹一個輕量級的開源Node框架, http-server. https://github.com/indexzero/http-server .進去一看就是一個烏龜. PS: 曾經聽過公司大牛說過。通常牛逼的開源東西都喜歡用動物作封面。

Notes: --cors 能夠解決跨域問題, 因此安裝好http-server後,直接經過 http-server filepath --cors,啓動咱們的代碼就好了. 啓動後訪問127.0.0.1:8080就會首先進入index.html頁面. 由於NodeJS默認是當前文件夾Index.html.(運行後可能控制檯會提示訪問uri是0.0.0.0:8080,反正個人電腦訪問這個是進不去的.前面給的地址是能夠訪問的.)

 -p  Port to use (defaults to 8080)

 -a  Address to use (defaults to 0.0.0.0)

 -d  Show directory listings (defaults to 'True')

 -i  Display autoIndex (defaults to 'True')

 -e  or  --ext  Default file extension if none supplied (defaults to 'html')

 -s  or  --silent  Suppress log messages from output

 --cors  Enable CORS via the  Access-Control-Allow-Origin  header

 -o  Open browser window after staring the server

 -c  Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds (defaults to '3600'). To disable caching, use -c-1.

六擴展

  在網上有看過一些Angular教程, 發現generator-angualrjs這個框架挺不錯的.https://github.com/yeoman/generator-angular 雖然依賴的東西比較多，不過值得一試.
  Demo地址: http://files.cnblogs.com/files/FourLeafCloverZc/AngualarJS_ngView.zip