background preloader

AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN - Thinkster

AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN - Thinkster
The goal of this tutorial is to guide you through the creation of a Reddit/Hacker News clone using the MEAN stack. By completing this tutorial, you will gain a basic understanding of the MEAN stack including building a REST interface with Express.js on top of Node.js and using that interface to perform CRUD operations on a database via an AngularJS frontend. Why MEAN Stack? The acronym "MEAN" stands for "MongoDB Express.js AngularJS Node.js" and represents a group of technologies which are known to synergize well together. Prerequisites This course assumes knowledge of programming and at least basic knowledge of JavaScript. Recommendations for Completing this Tutorial Throughout the course of this tutorial, links to additional concepts and information will be included. We at Thinkster are firm believers in actually writing code. Project Specifications Before beginning work on any project, it's usually a good idea to know what you're building. Without further ado, let's jump in... if(! Recap

jimobrien/ngMorph Build Web Apps with AngularJS and Rails 4 - Thinkster The goal of this tutorial is to guide you through the creation of a Reddit/Hacker News clone using Rails 4 and AngularJS. By completing this tutorial, you will gain a basic understanding of Rails and AngularJS, using Rails to build a JSON REST API that interacts with an AngularJS frontend. Prerequisites This course assumes knowledge of programming and at least basic knowledge of JavaScript and Ruby, and you should be comfortable with basic web application concepts including REST and CRUD. Before you begin, you will also need to have Node.js and Rails already installed. Recommendations for Completing this Tutorial Throughout the course of this tutorial, links to additional concepts and information will be included. We at Thinkster are firm believers in actually writing code. Project Specifications Before beginning work on any project, it's usually a good idea to know what you're building. To begin this tutorial, we're going to start with the Angular side of things. Getting Started if(! Recap

Angular formFor - Create and validate HTML forms with Angular JS formFor is a form-creation and validation library built on top of Angular JS 1.2. It is strongly recommended that you use Angular 1.2.22+ due to a defect within the $parse service in earlier versions (see issue #2845). It is incredibly flexible, offering a wide range of configuration options. Check out the demos and documentation to learn more! Reach out to me on Github if you've got any questions. You can install this plugin with either Bower or NPM: This will create an angular-form-for folder within your bower_components or node_components directory. Lastly just include the formFor module in your Angular application like so: For more information about templating options see Templates and Overrides. Copyright (c) 2014 Brian Vaughn.

A Better Way to Learn AngularJS - Thinkster Congratulations on taking the plunge! This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them. This course is accompanied by AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN. The learning curve of AngularJS can be described as a hockey stick. With AngularJS, the "Ready, Fire, Aim" learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. Prerequisites Resources Since AngularJS is still in its infancy relative to other JavaScript frameworks, the number of encyclopaedic resources on it is still insufficient. AngularJS is not a library. Rather, it is a JavaScript framework that embraces extending HTML into a more expressive and readable format. Filling the Tank Adjusting Your Mirrors

toddmotto/angularjs-styleguide Things I Wish I Were Told About Angular.js Recently I have worked on a project using Angular.js. As of writing this post, it’s a medium sized app (~10 modules, ~20 controllers, ~5 services and ~10 directives) with quite decent test coverage. When I look back, I find myself learning much more about Angular.js than before. It’s not a smooth ride: I’ve gone through lots of refactor and rewrite. And there are lots of things I wish I were told before I started to work on Angular.js Heads up! About Learning Curve Angular.js has a very different learning curve from Backbone.js. However, Angular.js is very different. The problem is when you dive into Angular.js and start to write some serious app, the learning curve suddenly becomes very steep and its documentations are either incomplete or cumbersome. Understand Modules Before You Start Angular.js does not force you to use its module system. So I had to stop and refactor my code. So if you do not want to go through the refactor, learn and plan your modules before you start. About Testing

AngularJS Tutorial | Learn Angular by Building a Gmail Clone AngularJS Tutorial Build a Gmail Clone Introduction Build a simple email application and learn core AngularJS concepts. Prerequisites: Understand how to build a basic Javascript application with jQuery Know how to launch a basic HTTP server (e.g. python -m SimpleHTTPServer Be able to clone a GitHub repo Topics covered: Single page applications (SPA) Client-side MVC patterns Two way data-binding Routing with templates AngularJS building blocks: Directives, Factories, & Controllers You'll notice that there are code checks included throughout this guide. Note: This guide is open to the public. Ready? Get notified when new guides are released Client side MVC Let's start with a concept that's core to Angular: client-side MVC MVC stands for Model, View, Controller. Model: That's the data; the business information of the application. The MVC pattern is a proven approach to organizing application code that's been refined over many years. Getting Started with AngularJS Adding Angular to your page <! $http

Things I have learned working with AngularJS | Código Vivo You need to know its “core” very well. i.e. Dependency Injection, Double binding, Directives. I think of them as the three pillars of AngularJs Dependency Injection It´s the heart of angular used to organize the code in single units of functionality/responsibility and to make it Testable!!!! What is the minimum you should know? The Concept: What is IoC? Double Binding Angular double binding is one of the concepts that people get sooner but at the same time don´t really fully understand how to use it. Understand the reason behind it. Directives Directives are hard to build, to maintain and to some extend to test. Many people ask how can you build complex directives and In my opinion the best answer is Don´t build complex directives. I should clarify this a bit. Complex UI components should be seen as a set of directives and services that work together to bring the components’ functionality to work. Understand all the possible properties of a directives definition object. Unit Testing Updated

Building a Chat App with node-webkit, Firebase, and AngularJS In this post we are going to build a desktop based chat application named vTak. We will use node-webkit to power the core desktop app and Firebase as our realtime data store. We will be using a slush generator named slush-wean to scaffold a basic node-webkit/Express/Angular app. The final product will look something like the following figure. Prerequistes If you are new to node-webkit, please refer to the following resources: Node Webkit – Build Desktop Apps with Node and Web TechnologiesNode Webkit powered Dashboard applicationNode webkit and Angularjs – A MovieStub App If you are new to Firebase, you should check out the following resources: Getting started with Firebase I would recommend using Sublime text while working with node-webkit apps. The Application Getting Started To build the application base, we are going to leverage a slush generator named slush-wean. Create a new folder named vTak and open a new terminal/prompt here. To scaffold the wean app, run slush wean. A quick overview:

Related: