I learn angularjs and build some code from scratch. The first, it show up the skeleton of website structure.
wwwroot:
-CSS
++main.css -->css how your website style
-IMG -->image for your website
++someIMG
-JS
++CONTROLLERs
++++maincontroller.js --->main controller
++SHARED -->include angularjs support library
++++angular-mocks.js
++++angular-route.min.js
++++angular.min.js
++app.js -->call into action
-INDEX.HTML--->the start point
Start point include 6 steps from introduction:
Awesome! You built an AngularJS app. How does it work?
- In app.js, we created a new module named
myApp. A module contains the different components of an AngularJS app. - Then, in index.html we added
<body ng-app="myApp">. Theng-appis called a directive. It tells AngularJS that themyAppmodule will live within the<body>element, termed the application's scope. In other words, we used theng-appdirective to define the application scope. - In MainController.js we created a new controller named
MainController. A controller manages the app's data. Here we use the propertytitleto store a string, and attach it to$scope. - Then, in index.html, we added
<div class="main" ng-controller="MainController">. Likeng-app,ng-controlleris a directive that defines the controller scope. This means that properties attached to$scopeinMainControllerbecome available to use within<div class="main">. - Inside
<div class="main">we accessed$scope.titleusing{{ title }}. This is called an expression. Expressions are used to display values on the page. - The value of
titleshowed up when we viewed the app in the browser. - The same framework we can see there: the View-the Controller
Comments
Post a Comment