今天搞事情，angularjs項目實例分析

今天呢，我要學習的這個angularjs項目的github地址為：https://github.com/monw3c/angularjs_pingan

可能呢？這不是最好的angularjs實例，但是呢還是好好分析其中是什么一個原理

好了開始了，首先你就這個項目git clone到本地

1、打開到 angularjs_pingan所在的文件夾

2、建個本地服務，這里我用到的是http-server    

npm install http-server --save-dev

接着http-server  如圖

可以瀏覽器打開網址：localhost:8080/

可以看到下圖

      

      

看到這個頁面進行分析

頁面的頂部：分為header和content

header由三部分組成

返回按鈕    title    收藏按鈕

實現方式：

define(['app'], function(app){
      
   return app.controller('lcxqCtrl', ['$scope','$rootScope','$http', function ($scope,$rootScope,$http) {

            $rootScope.headTitle = $rootScope.title = "產品詳情";
            $rootScope.favBol = false;
            $rootScope.backBol = true;

            $http.get('./json/lcxq.json').
              success(function(data) {
                
                $scope.lc = data;

              });


    }])

title為{{headTitle }}

通過ng-show="favBol "  ng-show="backBol "來控制返回上一頁，收藏按鈕是否顯示

收藏的按鈕點擊切換class來出現標示的效果這里寫了一個directive實現 具體代碼

<fav-btn></fav-btn>

　　

/**
 * 收藏按鈕的directive
 */
define(['jquery','app'], function ($,app) {
      app.directive('favBtn', [function () {
        return {
            restrict: 'AE',
            replace: true,
            template: '<a href="javascript:void(0)" class="btn-fav" ng-show="favBol"><span></span></a>',
            link: function (scope, ele, attr) {
                $(ele).bind("click", function(){
                    $(this).toggleClass('btn-fav-select')
                })
                
            }    
        }
  }])

})

content:

接下來的content的部分主要的實現

content主要是數據的渲染，從后台取到數據進行套用

define(['app','geoFactory'], function(app,geoFactory){
      
   return app.controller('wdListCtrl', ['$scope','$rootScope','$http','geoFactory', function ($scope,$rootScope,$http,geoFactory) {

            $rootScope.headTitle = $rootScope.title = "營業網點";
            $rootScope.favBol = false;
            $rootScope.backBol = false;

            $scope.getMore = function(){
              angular.element('.list-box ul').append('<p>1111111111111111111111</p>')
            }

            $http.get('./json/yywd.json').
              success(function(data) {

                $scope.branchs = data.branchs;
                
              });

        }])

})

<link rel="stylesheet" href="css/yywd.css" type="text/css" />
<div class="search-box">
      <b class="dw"><img src="images/dingwei.png"></b>
      <input type="search" class="search-input" placeholder="輸入網點地址或名稱">
      <button class="btn">搜索</button>
    </div>
    <div class="list-box" >
       <ul>
        <li ng-repeat="branch in branchs">
          <a href="#/wdxq">
           <dl>
            <dt class="search-key-img">
              <img ng-src="{{branch.branch_logo}}">
            </dt> 
            <dd class="search-key-title">
               <p>{{branch.branch_name}}</p>
              </dd>
              <dd class="search-key-info">
               <p>{{branch.branch_type}}</p>
              </dd>
              <dd class="search-key-tag">
                <p>{{branch.branch_addr}}</p>
              </dd>
            </dl>
          </a>
        </li>
       </ul>
        <p class="get-more" ng-click="getMore()">加載更多</p>
    </div>

    <div geo refresh="refreshGeo()"></div>

　　這里面的主要的套路的就是這樣的

頁面的跳轉的套路呢就是：

/**
 * 路由
 */
define(['app'], function(app){
  
   return app.config(['$routeProvider',function($routeProvider) {
            $routeProvider
              .when('/', {
                templateUrl: 'js/views/wd/list.html',
                controller: 'wdListCtrl'
              })
              .when('/wdxq', {
                templateUrl: 'js/views/wd/xq.html',
                controller: 'wdxqCtrl'
              })
              .when('/sh', {
                templateUrl: 'js/views/sh/list.html',
                controller: 'shListCtrl'
              })
              .when('/shxq', {
                templateUrl: 'js/views/sh/xq.html',
                controller: 'shxqCtrl'
              })
              .when('/listimg', {
                templateUrl: 'js/views/sh/listimg.html',
                controller: 'listimgCtrl'
              })
              .when('/jr', {
                templateUrl: 'js/views/jr/list.html',
                controller: 'jrListCtrl'
              })
              .when('/lcxq', {
                templateUrl: 'js/views/jr/lcxq.html',
                controller: 'lcxqCtrl'
              })
              .when('/jjxq', {
                templateUrl: 'js/views/jr/jjxq.html',
                controller: 'jjxqCtrl'
              })
              .otherwise({ redirectTo: '/' });

              //$locationProvider.html5Mode(true).hashPrefix('!');

   }])
   
  
})

 

  分析index.html中所用到的技術

angular.bootstrap(document,["pinganApp"]);
用了這個就不要在index.html加上ng-app="pinganApp"

然后就是控制器的套路，每個頁面對應一個控制器，這里注意了是寫在路由上

 .when('/jjxq', { templateUrl: 'js/views/jr/jjxq.html', controller: 'jjxqCtrl' })

接下來自己還會去多看看angular項目進行一個實際的分析，最后自己設計一個angular項目