Customization

    For installation (javascript and css), we can use . Bower is a package manager for the web. It’s quite with composer in PHP.

    Before installation bower, we must install:

    • nodeJs & npm
      Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. NPM is package manager for javascript

    • a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

    Installation Bower

    Bower is a command line utility. Install it with npm.

    Usage

    Create file bower.json in folder web-client

    1. {
    2.   "name": "Angular1-Yii2",
    3.   "version": "1.0.0",
    4.   "homepage": "https://github.com/hscstudio/angular1-yii2",
    5.   "description": "AngularJS 1.3 and Yii Framework 2.0",
    6.   "dependencies": {
    7.     "angular": "~1.3.0",
    8.     "bootstrap": "~3.1.1",
    9.     "angular-route": "~1.3.0"
    10. }

    And then create file , this file contains configuration of bower, add parameter directory to specify target folder installation.

    1. {
    2.   "directory": "assets"
    3. }

    In command line, do this

    1. cd web-client2
    2. bower install

    After installation finished, You can see folder assets have contained library angular, bootstrap, etc.

    Include in Index

    Because structure folder that downloaded by bower is different, we should adjust links js and css in file index.html.

    1.   <!-- CSS -->
    2.   <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css" />
    3.   <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap-theme.min.css" />
    1.   <!-- JS -->
    2.   <script src="assets/angular/angular.min.js"></script>
    3.   <script src="assets/angular-route/angular-route.min.js"></script>

    Enhance User Interface

    Add module angular-animate in bower.json

    And then do 

    1. bower update

    Create for define animation, for example:

    3. }
    4. .animate.ng-enter         {  
    5.     -webkit-animation:scaleUp 0.5s both ease-in;
    6.     -moz-animation:scaleUp 0.5s both ease-in;
    7.     animation:scaleUp 0.5s both ease-in;  
    8. }
    10. /* scale up */
    11. @keyframes scaleUp {
    12.     from         { opacity: 0.3; transform: scale(0.8); }
    13. }
    14. @-moz-keyframes scaleUp {
    15.     from         { opacity: 0.3; -moz-transform: scale(0.8); }
    16. }
    17. @-webkit-keyframes scaleUp {
    18.     from         { opacity: 0.3; -webkit-transform: scale(0.8); }
    19. }
    • ng-leave : when attach when leaving view

    Include css animation in index.html:

    1. <link rel="stylesheet" href="style.css" />

    Add class animate in ng-view

    1. <div id="main" class="container"> 
    2.     <!-- angular templating -->
    3.     <!-- this is where content will be injected -->
    4.     <div ng-view class="animate"></div>

    Include module ngAnimate in :

    1. var spaApp = angular.module('spaApp', [
    2.   'ngRoute',
    3.   'spaApp.site',
    4.   'spaApp.book',
    5.   'ngAnimate' // add module ngAnimate
    6. ]);

    For further informations, read this:

    Flash Message

    Angular Lazy Loader

    When we add some module, we must add include script for sub module in main. By use module ocLazyLoad we can make lazy load in angular, include only when needed.

    • Download ocLazyLoad.js (you can install it with bower install oclazyload or npm install oclazyload) and add the file to your project.
    • Add the module oc.lazyLoad to your application:
    • Load on demand:
      1. spaApp.controller("MyCtrl", function($ocLazyLoad) {
      2. $ocLazyLoad.load('testModule.js');
      3. });
      With $ocLazyLoad you can load angular modules, but if you want to load any component (controllers / services / filters / …) without defining a new module it’s entirely possible (just make sure that you define this component within an existing module).

    Also don’t forget that if you want to get started and the docs are not enough, see the examples in the ‘examples’ folder!

    Customize URL

    Error Handling

    Authorization

    Deploying Application

    Before we deploy our application, we need do some things.

    Read official guide for application production click here.

    Disabling Debug Data

    By default AngularJS attaches information about binding and scopes to DOM nodes, and adds CSS classes to data-bound elements, but we can disable this in production for a significant performance boost with:

    1. spaApp.config(['$compileProvider', function ($compileProvider) {
    2.   $compileProvider.debugInfoEnabled(false);
    3. }]);

    Strict DI Mode

    Using strict di mode in your production application will throw errors when a injectable function is not annotated explicitly. Strict di mode is intended to help you make sure that your code will work when minified. However, it also will force you to make sure that your injectable functions are explicitly annotated which will improve angular’s performance when injecting dependencies in your injectable functions because it doesn’t have to dynamically discover a function’s dependencies. It is recommended to automate the explicit annotation via a tool like ng-annotate when you deploy to production (and enable strict di mode)

    To enable strict di mode, you have two options:

    1. <div ng-app="spaApp" ng-strict-di>
    2.   <!-- your app here -->
    3. </div>

    or

    1. angular.bootstrap(document, ['spaApp'], {
    2.   strictDi: true
    3. });

    Web Service

    Same with AngularJs, in production environments, we should disable debug mode. It may have a significant and adverse performance effect, besides that the debug mode may expose sensitive information to end users.

    Modify file in web-service, set Yii_DEBUG const to be false, and then YII_ENV to be prod.

    1. defined('YII_DEBUG') or define('YII_DEBUG', false);