angularjs 初學者的坑

有關controller的定義

從angularjs1.3開始，已經不容許定義全局的controller， 因此網上好多老的demo在運行的時候會報沒有註冊對應的controller。因此，1.3之後的angrularjs 必須以下定義：

angular.module('pro01App2' , [])
    .controller('AboutCtrl', function () {

  });

有關ngroute

再用yoman生成的angrularjs項目，頭部的導航條點擊沒有相應。

看瀏覽器的地址，多了一個感嘆號，可是在index.html 裏面是以下的顯示：

<ul class="nav navbar-nav">
          <li class="active"><a href="#/">Home</a></li>
          <li><a ng-href="#/about">About</a></li>
          <li><a ng-href="#/">Contact</a></li>
        </ul>

有以下的處理方法：

• 將上面的連接裏面添加一個感嘆號。 --- 這個方法太挫了

<ul class="nav navbar-nav">
          <li class="active"><a href="#!/">Home</a></li>
          <li><a ng-href="#!/about">About</a></li>
          <li><a ng-href="#!/">Contact</a></li>
        </ul>

• 因爲 ng-route 從1.6之後，$locationProvider 添加了「！」 感嘆號的前綴。具體的連接以下： https://docs.angularjs.org/api/ng/provider/$locationProvider

修改辦法： 在 app.js裏面，添加以下的代碼：

$locationProvider.hashPrefix('');

完整的實例：

app.config(function ($routeProvider , $locationProvider) {

  $locationProvider.hashPrefix('');

  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrlTest',
      controllerAs: 'main'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrlTest',
      controllerAs: 'about'
    })
    .otherwise({
      redirectTo: '/about'
    });
});