Angular entry Framework

Catalogue

First put the project address: The author is just getting started, each step is very difficult, basic knowledge of each point is relying on Baidu, just began to feel very hard, and slowly found the struggle to reap.
Https://git.oschina.net/xxd0x00/angularjstest.git
Angular first is a framework, so he has a background-like MVC layered, and he also has the Run method, dependent module, monitoring, routing, bidirectional data binding, "page anchor", general large projects using angular is very sensible, or your project team has front-end engineers, Otherwise you're just a "write interface" Angularjs look at the good, home analysis

First of all, angular can be very good support of the page between the routing jump + strong data binding the two core, paste out the file structure diagram
Global HTML file

<! DOCTYPE html>  
First App.js file 
The entire front end needs to rely on the module, you just follow this copy on the line

' Use strict ';
Dependency Injection   -dependent module
angular.module (' app ', [
    ' nganimate ',
    ' ngcookies ',
    ' Ngresource ',
    ' Ngsanitize ',
    ' Ngtouch ',
    ' ngstorage ',
    ' ui.router ',
    ' ui.bootstrap ',
    ' ui.load ',
    ' Ui.jq ',
    ' ui.validate ',
    ' oc.lazyload ',
    ' pascalprecht.translate ',
    ' ng.ueditor ',
    ' Angularfileupload ',
    ' Ui.bootstrap.contextMenu '
]);
 
Config.js 
Mainly used for global functions, face of the Run method is equivalent to always run, detect you have no login, and can define some global functions, such as jump and so on.

Config var app = angular.module (' app '). config (function ($controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {//Lazy controller, Directive and service App.controll
        ER = $controllerProvider. Register;
        App.directive = $compileProvider. directive;
        App.filter = $filterProvider. Register;
        App.factory = $provide. Factory;
        App.service = $provide. Service;
        App.constant = $provide. Constant;
        App.value = $provide. Value;

      $httpProvider. Defaults.headers.common = {Accept: "Application/json, Text/plain, */*"};
}
    ); Equivalent to main app.run (function ($rootScope, storage, $http, $state) {$rootScope. Global = Storage.get ("Qslh_ow_manager_ GLOBAL ") | |

  {token: ', Login:false, User_info: {}//temporarily writes dead xxd};

  $rootScope. Go = function (args) {$state. Go (args);//Global Jump}; if (! $rootScope. Global.login) {//Determine if login is not logged in, then jump to login$state. Go ("Access.signin"); }else{//have login, that is to assign a token to HTTP $http. defaults.headers.common[' x-security-token '] = $rootScope. Global.token
  ; } 

});
 
 congfig.router.js To configure global jumps   
' Use strict '; /** * Configure routing */Angular.module (' app '). Run ([' $rootScope ', ' $state ', ' $stateParams ', function ($rootScope, $state
            , $stateParams) {$rootScope. $state = $state;
            $rootScope. $stateParams = $stateParams; $rootScope. Gateway = "/API";//This is the project name of your projects server}]). config ([' $stateProvider ', ' $urlRouterProvider ', function ($sta
            Teprovider, $urlRouterProvider) {$urlRouterProvider. Otherwise ('/app/manage/index ');//This is the URI on the match is not on, will automatically jump to this page
                    $stateProvider. State (' app ', {abstract:true,//layer nesting outermost URL: '/app ', Templateurl: ' partials/app.html '//This page can contain a lot of other pages}. State (' App.ma       Nage ', {url: '/manage ', Template: ' <div ui-view class= ' fade-in-up ' ></div> '
                This template represents the app.manage.* all pages will be loaded in the index.html <div ui-view></div>,}) . State ('App.manage.index ', {url: '/index ',//home page Templateurl: ' partials/manage/index.html ', resolve: {deps: [' $ocLazyLoad ', function ($ocL Azyload) {return//Allow pop-up reminders $ocLazyLoad. Load (' toaster '). T
                                        Hen (function () {return//will load the corresponding JS file
                                    $ocLazyLoad. Load (' js/controllers/manage/manage.js ');
                            }
                                ); }]}). State (' Access ', {url: '/access ', Template: ' &
                Lt;div ui-view class= "Fade-in-right-big smooth" ></div> '}). State (' Access.signin ', {
          URL: '/signin ', Templateurl: ' partials/signin.html ',      Resolve: {deps: [' Uiload ', function (uiload) {
                        return Uiload.load ([' js/controllers/signin.js ']); }]}, controller: "Signin_ctrl"//signin (Controller name in Page})}]);
 
Main.js 
Some of the global, such as logoff functions, compatibility, compatible Mobile, copy on the line,

' Use strict '; /* Controllers */angular.module (' app '). Controller (' Appctrl ', function ($rootScope, $scope, $translate, $localStora GE, $window, $state, CALL_API, storage) {//Add ' IE ' classes to HTML var Isie =!!
      Navigator.userAgent.match (/msie/i);
      Isie && angular.element ($window. document.body). addclass (' IE ');

      Issmartdevice ($window) && angular.element ($window. document.body). addclass (' smart ');
        Config $rootScope. App = {getway: ' http://localhost:8080 ', Name: ' Demo ', Version: ' 1.0 ',  For chart colors color: {primary: ' #7266ba ', info: ' #23b7e5 ', success: ' #27c24c ', Warning: ' #fad733 ', Danger: ' #f05050 ', Light: ' #e8eff0 ', Dark: ' #3a3f51 ', Black: ' #1c2b36 '}, settings: {themeid:1, Navbarheadercolor: ' Bg-black ', Navbarcollapsecolor: ' Bg-wHite-only ', Asidecolor: ' Bg-black ', Headerfixed:true, Asidefixed:false, Asidefol Ded:false, Asidedock:false, Container:false}} function Issmartdevice ($windo W) {//adapted from http://www.detectmobilebrowsers.com var ua = $window [' Navigator '] [' userage NT '] | | $window [' Navigator '] [' Vendor '] | |
          $window [' opera ']; Checks for IOs, Android, Blackberry, Opera Mini, and Windows mobile devices return (/iphone|ipod|ipad| silk| android| blackberry| Opera mini|
      iemobile/). Test (UA); } $scope. Logout = function () {Call_api.get ("/api/login/logout", function (data) {///Xxd Logout interface if (d
              Ata.code = = 100000) {$rootScope. Global.login = false;
            $rootScope. Global.token = ";
            Storage.set ("Qslh_ow_manager_global", $rootScope. GLOBAL);
      $state. Go ("Access.signin");//Xxd}}); }
      $Scope.maskshow = function () {angular.element ("#mask"). Show ();
      } $scope. maskhide = function () {angular.element ("#mask"). Hide (); }
  });
 
service.js File 
Equivalent to a custom method, or class, is very convenient equivalent to the tool class

(function (angular) {' Use strict ';

            Angular.module (' app '). Factory (' Storage ', function () {var service = {};

            Service.localstorage = Window.localstorage;
                Service.set = function (key, data) {try {data = json.stringify (data);
            } catch (ex) {} service.localStorage.setItem (key, data);

            };

                Service.get = function (key) {var content = Service.localStorage.getItem (key);
                    if (content) {try {return json.parse (content);
            } catch (ex) {}} return content;

            };
        return service; }). Factory ("Call_api", Function ($rootScope, common_base, $http) {var service = {PO St:function (URL, data, callback) {