Category Archives: AngularJs

What is two colons do in angular expression {{::}}? 在AngularJs上雙 :: 是什麼意思?

今日Code Review 時見到同事在 AngularJs的 project上 使用了

{::ctrl.title}

起初還以為是把打錯字
做了一會research之後發現
原來 {{::}}One-time Binding 的意思
就是說即使 在controller的 variable的內容有改變
這個 one-time binding的 value 也不會改變
詳情可以參考以下網頁
https://docs.angularjs.org/guide/expression#one-time-binding

Hope you find it useful

How to set a default state with Angular ui-router

最近使用了 Angular Js ui-route 來作我的js demo 的 navigation

之後發現一個問題
就是當URL 輸入錯的時間便會出現問題
那麼怎樣可以把設定一個把這些Request 直接連到一個page not found

解決方法十分簡單

我們可以在定義這個Module 設計route的時候設定 “$urlRouterProvider
之後在module內定義一個Default route 將去到的路徑 $urlRouterProvider.otherwise
e.g.

  $urlRouterProvider.otherwise('/home');
//或
  $urlRouterProvider.otherwise('/page-not-found');

便可以了
e.g.

var jsDemoApp = angular.module('jsDemoApp', ['ui.router']);

// configure our routes
jsDemoApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function ($locationProvider, $stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        // HOME PAGE ========================================
        .state('home', {
            url: '/home',
            templateUrl: '/modules/js-demo/views/index.html',
            abtract: true
        })
        // ABOUT PAGE
        .state('about', {
            url: '/about',
            templateUrl: '/modules/js-demo/views/about.html',
            abtract: true
        });
  }]);

Hope you find it useful

Document.Ready in AngularJs

相信很多朋友都有使用JQuery來 寫網頁…
大家對document.ready都不會陌生…

當大家轉了使用AngularJs的時候都可能會有一個 疑問…
如何在 AngularJS 上使用 document.ready?

解決方法十分簡單

我們可以使用angular.element(document).ready() 來實現 document.ready 待 html成功load完之後執行 document.ready入的程式碼

angular.element(document).ready(function () {
        console.log('Hello World');
    });

E.G.

angular.module("shareChiWaiApp", [])
    .controller("shareChiWaiCtrl", ["$scope", function ($scope) {

        function shareChiWaiViewModel() {
            var self = this;
            self.firstName = "ChiWai";
            self.surname = "Share";
        }

        
        
        angular.element(document).ready(function () {
        $scope.sharechiwai = new shareChiWaiViewModel();
          $scope.sharechiwai.firstName="before";
        console.log($scope.sharechiwai.firstName);
        });
    }]);

Hope you find it useful