Let's build an Angular app from scratch!
- 'Bootstrapping' our Angular app
0. Create application files
index.htmlandscript.js0. Bring in Angular codebase from a CDN 0. Define amoduleon theangularobject 0. Link this module using the directiveng-app - Data & Template-binding
0. Create an array of hard-coded data in
app.js0. Define acontrolleron theangularobject 0. Define thecontroller'sfunction (callback function) 0. Define a property on the ControllerFunction- e.g.
this.todos = todosArray0. Bind the controller to a DOM element inindex.htmlusing the directiveng-controller0. Use the directiveng-repeatto iterate over the collection invm.todos
- e.g.
- Replace
ng-controllerwithstatefrom ui-router 0. Removeng-controllerdirective 0. Bring inui.routerfrom a CDN 0. Injectui.routerin themodulesarray of dependencies 0. Define aconfigon the module. This will both inject$stateProviderand reference theRouterFunction0. Define yourRouterFunction, injecting$stateProvider0. Add onestateonto$stateProvider0. Add a new templatetodos-index.html0. Addui-viewto<main>
$ mkdir angular_practice
$ touch index.html app.jsLet's add in some HTML boilerplate.
in
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Bring in Angular CDN here -->
<script src="app.js"></script>
</head>
<body>
</body>
</html>Next, we'll add in the Angular codebase from a CDN, and then add a module to the angular object. If it seems odd that there is an angular object. Think back to jQuery/$. It's the same idea of a library/framework being encapsulated in a single, imported object.
in app.js:
angular
.module("todosAgain",[])in index.html:
<body ng-app="todosAgain">
{{3/0}}
</body>Since Controllers distribute data and an application's business logic, let's add in some hard-coded data.
in app.js
let todosData = [
{
task: "Grind out Angular apps all day so I can stack $stacks",
completed: true
},
{
task: "Order 500lbs of Cheetos with this Angular-dev paycheck",
completed: false
},
{
task: "Monetize my meme-stream",
completed: true
},
{
task: "Create Machine Learning platform optimized for dank memes",
completed: false
}
]Next, we will add a controller onto the angular object.
in app.js
angular
.module("todosAgain",[])
.controller("TodosController", TodosControllerFunction)We'll also have to define the TodosControllerFunction.
function TodosControllerFunction(){
this.todos = todosData;
}And finally let's bind the controller to a template (index.html). Template-binding is simply attaching a controller to a template. We will do this using ng-controller. Let's add in a <main></main> and bind the controller to it.
in index.html
<body ng-app="todosAgain">
<!-- we're creating a new instance of our controller and saving it to a variable vm -->
<main ng-controller="TodosController as vm">
</main>
</body>inside the main tag :
<div ng-repeat="todo in vm.todos">
{{todo.task}}
</div>First, we'll grab UI Router from a CDN and bring it into our application.
Next, we'll add a config to the angular object. A state in Angular is basically a route: it's an umbrella term for a URL, the view associated with it, and any controllers used in that view.
angular
.module("todosAgain",["ui.router"])
.config([
"$stateProvider",
RouterFunction
])
.controller("TodosController", ["$stateParams", TodosControllerFunction])
function TodosControllerFunction($state, $stateParams){
this.todos = todosData;
}Next, we'll define RouterFunction:
function RouterFunction($stateProvider){
$stateProvider
.state("todosIndex", {
url: "/",
templateUrl: "todos-index.html",
controller: "TodosController",
controllerAs: "vm"
})
}What is a state doing here? It's binding a controller to a template, and making that binding available at a route, in this case /.
We haven't yet made the new template todos-index.html so let's do that.
Now, we'll cut this HTML from index.html and paste it to todos-index.html.
<div ng-repeat="todo in vm.todos">
{{todo.task}}
</div>Then, we'll remove ng-controller and replace it with ui-view:
<main ui-view>
</main>Run your server by typing in hs. Open your browser to http://localhost:8080/#/ and voila!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent