Let's build an Angular app from scratch!
- 'Bootstrapping' our Angular app
0. Create application files
index.html
andscript.js
0. Bring in Angular codebase from a CDN 0. Define amodule
on theangular
object 0. Link this module using the directiveng-app
- Data & Template-binding
0. Create an array of hard-coded data in
app.js
0. Define acontroller
on theangular
object 0. Define thecontroller's
function (callback function) 0. Define a property on the ControllerFunction- e.g.
this.todos = todosArray
0. Bind the controller to a DOM element inindex.html
using the directiveng-controller
0. Use the directiveng-repeat
to iterate over the collection invm.todos
- e.g.
- Replace
ng-controller
withstate
from ui-router 0. Removeng-controller
directive 0. Bring inui.router
from a CDN 0. Injectui.router
in themodules
array of dependencies 0. Define aconfig
on the module. This will both inject$stateProvider
and reference theRouterFunction
0. Define yourRouterFunction
, injecting$stateProvider
0. Add onestate
onto$stateProvider
0. Add a new templatetodos-index.html
0. Addui-view
to<main>
$ mkdir angular_practice
$ touch index.html app.js
Let'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!