ANGULARJS Study Notes (ii)-----Bootstrap Framework

1. Download the new jquery-1.11.1 file.

2. Download the new bootstrap file.

3. Select the template for the streaming layout to populate the index.html file.

4. Convert top and foot to Nginclude file

Nginclude must use the $scope object, so you need to set a global Mainctrl to inject strings or global variables into $cope.

$rootScope. Global =global;

The global variable is assigned to $rootscope directly, and the subsequent sub-$scope is inherited, and the static definition is separated from the CTRL key.

5. Convert the static menu to the data call mode

1. Try to inject global into router for success, constant can define router content

. config ([' $routeProvider ', ' Global ', function ($routeProvider, global) {

$routeProvider. When ('/view1 ', {templateurl:global. ROUTERMAP.VIEW2, controller: ' MYCTRL1 '});

$routeProvider. When ('/view2 ', {templateurl:global. ROUTERMAP.VIEW1, controller: ' MyCtrl2 '});

$routeProvider. Otherwise ({redirectto: '/view1 '});

}]);

After attempting to convert global from constant to value, an error occurs, router cannot set the route via dynamic read, the menu data is only displayed and does not involve routing.

2. Build the menu.asp file in the backend and generate the 3*5 navigation structure in it

3. Test modified data Reading module

Add parameter Entry $resource ("Path/:url", {url: "@url"},action)

Invokes a method. Action ({url:testurl},function (result) {})

The path is still set in service when actually used

Service with parameters, you need to modify the internal variables in the calling method

4, column set active flag

Set the current flag bit in $scope and compare it to the identity in the data

ng-class= "{' Active ': Menusubitem.id==activeitem}"

The ng-repeat is self-looping and is added directly to the object you want to loop, without having to set up the container outside.

There is no return function in the route and the identity needs to be set in the called CTRL.

6. Call the bootstrap (Carousel) component

1. Copy Carousel Code and pictures

2, Carousel Call mode is href, this and angular route will conflict, modify the corresponding part in Bootstrap.js, add data-href matching mode, and change the call mode to Data-href.

3. Carousel's original structure contains the picture itself and the control button, which optimizes it to the standard ANGURLA directive

4, in the directive with template to load carousel, which carousel-inner the picture part as the HTML output part, and give directive name App-carousel, and use the Transclude property call.

5, the carousel-indicators in the template for the picture number display, for the part that needs to be modified, this part uses the ng-repeat to circulate, the content that calls needs to use link to set the scope, not directly with the scope parameter setting.

6. $ (Element) through jquery. Find (". Item"). Size () to get the number of pictures

7. Give the first picture an active state, $ (element). Find (". Item:first"). AddClass ("active");

8, after adding data for the image, it is not possible to call Ng-repeat data through directive, it should be because the asynchronous read is not completed, but the component is built first, so the transclude is discarded, and the data read part is transferred to the directive internal completion. (The way data interaction was discovered, and therefore modified, this part is void)

9, data interaction needs to use scope, and then use $watch to bind the data in link

Scope: {isize: "=itemsize"},

Scope. $watch (' Isize ', function (n, o) {

if (typeof (scope.isize)! = "undefined") {

}

});

Which needs to be judged whether it has been bound.

10, organized into compressed file angularjs-0.1-20140618-bootstrap.zip.