Felix Gondwe

keep looking, don't settle

AngularJs 101.1 — March 20, 2016

AngularJs 101.1

Introduction

Angular is a hot trending topic in web development right now. AngularJs is a front-end de-facto open source javascript framework maintained by Google. The fact that Google maintains it shows that its reliable. This post is part of angular series tutorial project that I am working on. As of this writing Angular2 is in beta and will be released soon. The initial part of this series will take the Angular 1.* walk so we get a senseĀ where the story is coming from and where we are going, later on after Angular2 comes out, we will make the transition to talk more about Angular2. This is an interesting journey you don’t want to miss out, I promise we will have fun šŸ™‚

We will jump straight to code, that’s quick way to learn Angular in my opinion and we will try to explain every single step we take so we don’t lose anyone on the way. If you face any issues feel free to comment and we will try to resolve whatever issues you’re facing.

Prerequisites

  1. Working computer (PC/MAC). I will beĀ using Mac for this series. This is the only requirement you need hoenstly, so computer + internet that’s all you need.
  2. Node. Assuming you’re working in your local machine.
  3. Editor (any editor of your choice). I will be using MicrosoftVisual Code editor. You can download visual codeĀ here.
  4. Code_pen for live demos (optional)
  5. Github. We will keep our source code in case you want to try out few things (optional)

Getting Started

Install Node

You can install node via terminal or just download fromĀ here. If you don’t want to hustle through the terminal its easier and safe to just use the link provided. Terminal is not for the faint heart šŸ˜‰

Installing node via terminal using homebrew

  1. open your terminal
  2. Type $ brew install node
  3. Assuming the installation went through, now you have NPM to handle all your node packages we will use in this series.

Editor

Use whatever you want. Visual code is amazing though, feel free to try it out.

Ok that we have all that out of the way let’s do a hello world angular application then we will discuss the details.

————————–

Working Examples

1. Hello world
2. Business card

 

Details

<div ng-app="mainApp"></div>
;

ng-app is an angular directive where we’re declaring the module in our example.

<div ng-controller="appController"></div>

 

ng-controller is an angular directive where we’re declaring the controller in our example.

ng-model is another useful directive that we can use to “keep” data between the view and the controller.

Angular selling point is that it makes static html dynamic.

Before we get into more technical details we need to understand basic
building blocks of angular.

 

To be continued…

 

 

 

 

— March 19, 2016

Introduction

Angular is a hot trending topic in web development right now. AngularJs is a front-end de-facto open source javascript framework maintained by Google. The fact that Google maintains it shows that its reliable. This post is part of angular series tutorial project that I am working on. As of this writing Angular2 is in beta and will be released soon. The initial part of this series will take the Angular 1.* walk so we get a senseĀ where the story is coming from and where we are going, later on after Angular2 comes out, we will make the transition to talk more about Angular2. This is an interesting journey you don’t want to miss out, I promise we will have fun šŸ™‚

We will jump straight to code, that’s quick way to learn Angular in my opinion and we will try to explain every single step we take so we don’t lose anyone on the way. If you face any issues feel free to comment and we will try to resolve whatever issues you’re facing.

Prerequisites

  1. Working computer (PC/MAC). I will beĀ using Mac for this series. This is the only requirement you need hoenstly, so computer + internet that’s all you need.
  2. Node. Assuming you’re working in your local machine.
  3. Editor (any editor of your choice). I will be using MicrosoftVisual Code editor. You can download visual codeĀ here.
  4. Code_pen for live demos (optional)
  5. Github. We will keep our source code in case you want to try out few things (optional)

Getting Started

Install Node

You can install node via terminal or just download fromĀ here. If you don’t want to hustle through the terminal its easier and safe to just use the link provided. Terminal is not for the faint heart šŸ˜‰

Installing node via terminal using homebrew

  1. open your terminal
  2. Type $ brew install node
  3. Assuming the installation went through, now you have NPM to handle all your node packages we will use in this series.

Editor

Use whatever you want. Visual code is amazing though, feel free to try it out.

Ok that we have all that out of the way let’s do a hello world angular application then we will discuss the details.

————————–

Working Examples

1. Hello world
2. Business card

 

Details

<div ng-app="mainApp"></div>
;

ng-app is an angular directive where we’re declaring the module in our example.

<div ng-controller="appController"></div>

 

ng-controller is an angular directive where we’re declaring the controller in our example.

ng-model is another useful directive that we can use to “keep” data between the view and the controller.

Angular selling point is that it makes static html dynamic.

Before we get into more technical details we need to understand basic
building blocks of angular.