Giter VIP home page Giter VIP logo

angularjs's Introduction

Angular JS

Expressions in Angular

  • An Expression is simply a JS expression wrapped in curly braces and is outputed to the DOM
  • Expressions can be:
    • Some Computation Logic
    • Literals
    • Operators
    • Variables
<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app ng-init="sayHi='Hi There Everyone!'; luckyNum= 13; rate = 10.5; time= 11; myArr = [458, 812]; individual = { fName:'Omar', lName :'Belkay'}">
        {{ (luckyNum * rate * time)/100 }}<br />
        {{myArr[1]}} <br />
        {{individual.fName + " " + individual.lName}}
    </div>
</body>
</html>

ng-init directive

  • I use the ng-init directive to declare variables within my application and they can be of any datatype

NO-FLY ZONES FOR EXPRESSIONS

  • DeniedIcon
  1. Contain a conditional
  2. Have a loop
  3. Exceptions
  4. RegEx
  5. Declare Functions
  6. Have A Comma
  7. Have A Void
  8. Have the return keyword in them

Install Angular CLI

npm i -g @angular/cli

How To Create An Angular Application Using The Angular CLI

ng new nameofangapp

Flags When Creating An Angular App

  • --verboase=true Telling Angular to output more info to the console
  • --skipTests=true Telling Angular to not generate test files for my project
  • --skipGit=true Telling Angular to not initialize a Git Repo for my project
  • --routing=true Telling Angular that I want routing in my app and to have it listed in my modules

Project Structure

├── README.md
├── /node_modules ======> 3rd party libs are installed here that we use in my app
└── /src
    └── /myapp ======> All the files necessary to generate the UI of my app are here
    |   ├── myapp-routing.module.ts
    |   ├── myapp.component.css ======> CSS Stylesheet for the root component
    |   ├── myapp-component.html ======> Create the html file for me
    |   ├── myapp.component.spec.ts ======> Unit tests for the root component
    |   ├── myapp.component.ts ======> Definition of module and properties
    |   └── myapp.module.ts  ======> Root Component i.e. App.js in ReactJS
	├── /assets ======> Static files i.e. images, fonts, etc.
	├── /environments ======> configuration for development and production environments
    |   ├── environment.prod.ts
    |   └── environment.ts
	├── favicon.ico 
	├── index.html ======> Bootstraps my app
	├── main.ts  ======> Main entry point of your Angular app tells Angular to start my app
	├── polyfills.ts 
    ├── styles.css  ======> Global styling
    └── test.ts  ======> Unit Tests
├── angular.json ======> Defines structure to my angular application
├── karma.conf.js ======> Test runner file
├── package-lock.json ======> Gives Angular Details in regards to the version for all the packages in node_modules dir
├── package.json ======> Configures all your npm package dependencies
├── README.md ======> Documentation
├── tsconfig.app.json
├── tsconfig.json ======> Typescript configuration file... Gives instructions to the typescript compiler
├── .browserslistrc
├── .editorconfig
└── .gitignore ======> List the files you do not want Git To Track Here

Fire Your Angular App in The Browser

ng serve

How To Create A Component In Angular

ng generate component navbar

2nd Way ofHow To Create A Component In Angular

ng g c navbar

Dependency Injection In Angular

  • @ Injectable Decorator tells Angular that this specified Service Class should be visible to everyone
    • within your Application.
  • Since Components consume services
  • I need Dependency Injection to give my component all the power my service has for functionality purposes

Good Practices

  • ALWAYS keep your Components and Services Separate
  • Failure to do so will require you to FIRST declare your Service THEEEN your Component
    • IF you fail to follow this order it results in:
      • RUNTIME NULL REFERENCE ERROR

angularjs's People

Contributors

omarbelkady avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

angularjs's Issues

Data Binding

Synchronize data between the model and the view!

Controller

Maintainer of the data and business logic

Module

The one that holds all the good stuff of your application:

  • controllers
  • services
  • filters
  • directives

View

What the Viewer Sees i.e. the DOM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.