tutsplus / building-a-web-app-from-scratch-with-angularjs Goto Github PK

JavaScript 56.06% CSS 1.12% HTML 42.81%

building-a-web-app-from-scratch-with-angularjs's Introduction

Tuts+ Course: Building a Web App From Scratch With AngularJS

Instructor: Andrew Burgess

AngularJS is an amazing front-end framework that has a very novel approach to building web applications, completely unlike any of the other frameworks you might be used to. In this course, we'll take a look at all the core components of Angular, and how they work together to build a complete application. We'll be building an address book: Starting from nothing at all, and ending up with a complete, working project. The focus of the course will be on Angular, but we'll use Express for the back-end code.

Installation

It is assumed that you have already installed node and bower. There are a couple of other compontents that you will need to install.

You should have a global .bowerrc file. Create it if it does not exist, with the following contents.

	{
    	"directory": "public/lib"
	}

Now open your project folder in the commandline and run the following.

	npm install express
	bower install angular
	bower install bootstrap

Source files for the Tuts+ course: Building a Web App From Scratch With AngularJS

building-a-web-app-from-scratch-with-angularjs's People

Contributors

Stargazers

Watchers

Forkers

tvobrachini jamz971 mouthzipper sengertwd prabhjotsl wynout mutz sanatmisra tbarbaro olegil caomca ashfanahamed brzezinskip vikramcse itmyprofession beebase kmalur sergeybogevolny qmmr jespersgaard bigpeteh durgaprasadpati nathanphan mdgouse2000 jexaox kirankumaralugonda alibenmessaoud ematav fredericksilva jayshah-07 jonathanmann sujanchand immuhammadj renzosalvador sreenadh09 stevengpa maciejmoksa sairam0903 fatpandadesigns pramodrhegde ehteshammehmood dkeler hardikjain29 r03ert nipuntalwar dazune joinjoohny milankracht singh-navneet msegeya eddippo technolazy aethatsme yhailu davisdole stradap ajtwiss01 shubhranjali anujmailbox pmerg vinothmathi

building-a-web-app-from-scratch-with-angularjs's Issues

On step 2.3 - Token '{' invalid key at column 2

I have the exact same code (verified several times) as you have in the video and its not working for me. Im on step 2.3 form field directives - the directive.

Im getting following error:

In the browser:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.1/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bfield%7D%7D.%24error&p4=%7Bfield%7D%7D.%24error
On angular site:

Error: $parse:syntax Syntax Error Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error].

I asked a experienced coder and he said you're using bad practice in this project and expressions shouldnt be used like that in directives. When I tried to change from {{form}}.** to form.**, I didnt manage to get it to work either. Please help.

issues with the query on the contact list

Hi I was working with the tutorial until the lesson 7 and when I tried doing a search it would simply not work.
Though I haven't changed a thing from the code written up to that point.
It seems that whenever a search is launched I get a blank list.
The list is filtered by query and I called ng-model="query" on the search field.

Any help would be much appreciated.

thanks

[Windows] Error: ENOENT, stat

Hi how can i fix this error?

jfricks@MAGICWEB /c/xampp/htdocs/sites/contacts
$ nodemon server.js
12 Feb 09:25:20 - [nodemon] v1.3.6
12 Feb 09:25:20 - [nodemon] to restart at any time, enter rs
12 Feb 09:25:20 - [nodemon] watching: .
12 Feb 09:25:20 - [nodemon] starting node server.js
Error: ENOENT, stat 'c:\xampp\htdocs\sites\contacts\public\main.html'

null id in users.json

Hi,

if I create users.json file with contents of [] and then try to register a user (name: a, pass: a), the user is not logged in automatically and can't log in at all, and the users.json entry looks like this:

[{
"username":"a",
"password":"ca978112ca1bbdcafac231b39a23dc4da786eff8147c4e72b9807785afee48bb",
"options":{},
"id":null
}]

Further registrations (name: b, pass: b) seem to produce correct results:

[{
"username":"a",
"password":"ca978112ca1bbdcafac231b39a23dc4da786eff8147c4e72b9807785afee48bb",
"options":{},
"id":null
},{
"username":"b",
"password":"3e23e8160039594a33894f6564e1b1348bbd7a0088d42c4acb73eeaed59c009d",
"options":{},
"id":1
}]

explicitly specify "extended: true" for extended parsing accounts.js

In account.js file, we have to replace the : .use(bodyParser.urlencoded())
with .use(bodyParser.urlencoded({extended :true})), as it requires the extended parameter to be mentioned explicitly.

GET http://localhost:5000/undefined 404 (Not Found)

i am getting this error

along with this.

Image (async)
	fetch	@
	(anonymous)	@
	setTimeout (async)
	refresh	@
	init	@
	(anonymous)	@
	each	@
	each	@
	d.fn.elevateZoom	@
	link	@
	(anonymous)	@
	sa	@
	n	@
	g	@
	g	@
	n	@
	g	@
	(anonymous)	@
	(anonymous)	@
	d	@
	m	@
	(anonymous)	@
	$digest	@
	$apply	@
	l	@
	v.onload	@
	load (async)
	(anonymous)	@
	q	@
	(anonymous)	@
	(anonymous)	@
	$digest	@
	$apply	@
	l	@
	v.onload	@
	load (async)
	(anonymous)	@
	q	@
	(anonymous)	@
	(anonymous)	@
	$digest	@
	$apply	@
	(anonymous)	@
	invoke	@
	c	@
	Pc	@
	ue	@
	(anonymous)	@
	j	@
	k	@
	setTimeout (async)
	(anonymous)	@
	i	@
	fireWith	@
	fire	@
	i	@
	fireWith	@
	ready	@
	S	@

can any one find solution ?..

settings bug

I did the whole course and seem to have an error when trying to set the settings in the last lesson (also happens with original course files). When I choose a field in settings and go to all contacts, I get this in the console:

TypeError: Cannot read property 'id' of undefined
at /Users/devoth/Sites/tut-Building-a-Web-App-From-Scratch-With-AngularJS/api.js:12:48
at Layer.handle as handle_request
at next (/Users/devoth/Sites/tut-Building-a-Web-App-From-Scratch-With-AngularJS/node_modules/express/lib/router/route.js:131:13)
at Route.dispatch (/Users/devoth/Sites/tut-Building-a-Web-App-From-Scratch-With-AngularJS/node_modules/express/lib/router/route.js:112:3)
at Layer.handle as handle_request
at /Users/devoth/Sites/tut-Building-a-Web-App-From-Scratch-With-AngularJS/node_modules/express/lib/router/index.js:277:22
at Function.process_params (/Users/devoth/Sites/tut-Building-a-Web-App-From-Scratch-With-AngularJS/node_modules/express/lib/router/index.js:330:12)
at next (/Users/devoth/Sites/tut-Building-a-Web-App-From-Scratch-With-AngularJS/node_modules/express/lib/router/index.js:271:10)
at jsonParser (/Users/devoth/Sites/tut-Building-a-Web-App-From-Scratch-With-AngularJS/node_modules/body-parser/lib/types/json.js:71:36)
at Layer.handle as handle_request

If I refresh, then I have to log in, and funny enough after logging in when I go to all contacts I can see new columns… But a lot of strange things happen when I start to do stuff afterwards (like creating new contacts etc).

I haven't noticed this earlier (maybe I wasn't fiddling with settings/options) but it might happen after upgrading OSX to El Capitan.

TypeError: app.use() requires middleware functions

I'm working on the adding user accounts section and I get the error below when I try to start the server. It seems to not like the .use(users) in server.js. Any idea how to fix this?

Thanks,
Kenroy

/opt/web/ngApp/node_modules/express/lib/application.js:209
throw new TypeError('app.use() requires middleware functions');
^
TypeError: app.use() requires middleware functions
at EventEmitter.use (/opt/web/ngApp/node_modules/express/lib/application.js:209:11)
at Object. (/opt/web/ngApp/server.js:8:4)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
18 Sep 21:32:32 - [nodemon] app crashed - waiting for file changes before starting...

ngMessages is not working

Greetings, I have injected ngMessages in the directive but it is not working

This is my code :

angular.module('contacts.directives', ['ngMessages'])
.value('FieldTypes', {
text: ['Text', 'should be text'],
email: ['Email', 'should be an email address'],
number: ['Number', 'should be a number'],
date: ['Date', 'should be a date'],
datetime: ['Datetime', 'should be a datetime'],
time: ['Time', 'should be a time'],
month: ['Month', 'should be a month'],
week: ['Week', 'should be a week'],
url: ['URL', 'should be a URL'],
tel: ['Phone Number', 'should be a phone number'],
color: ['Color', 'should be a color']
})
.directive('formField', function ($timeout, FieldTypes) {
return {
restrict: 'EA',
templateUrl: 'templates/form-field.html',
replace: true,
scope: {
record: '=',
field: '@',
live: '@',
required: '@'
},

        link: function ($scope, element, attr) {
            $scope.$on('record:invalid', function () {
                $scope[$scope.field].$setDirty();
            });

            $scope.types = FieldTypes;

            $scope.remove = function (field) {
                delete $scope.record[field];
                $scope.blurUpdate();
            };

            $scope.blurUpdate = function () {
                if ($scope.live !== 'false') {
                    $scope.record.$update(function (updatedRecord) {
                        $scope.record = updatedRecord;
                    });
                }
            };
            var saveTimeout;
            $scope.update = function () {
                $timeout.cancel(saveTimeout);
                saveTimeout = $timeout($scope.blurUpdate, 1000);
            };
        }
    };
})

Please update express

The current version of express (v4.7.2) causes the node server to throw an error (TypeError: res.sendFile is not a function). Using an express version newer than v4.8.0 solves the problem.

router. dot issue in api.js

In api.js you have instructed to write: (line 25) [lecture 1.6]
router.
.param('id', function (req, res, next)

but my node server is throwing exception for that. Can you please provide source codes of the project in the stage after lecture 1.7?

ng-Messages Syntax Error

I am creating the directive for form field. And I got a ng-messages syntax error on the following code:

The error:

Angular explaination:

Angular version: 1.4.1
Angular message version: 1.4.1

express deprecated res.sendfile

You changed your code and looks like it's a deprecated method.

express deprecated res.sendfile: Use res.sendFile instead server.js:7:11

When i use res.sendFile then i get a new error.

var express = require('express'),
    app     = express();

app
    .use(express.static('./public'))
    .get('*', function (req, res){
      res.sendFile('public/main.html');
    })
    .listen(3000);

After this, i tried to be creative but i can't seem to be able to move on.

var express = require('express'),
    app     = express();

app
    .use(express.static('./public'))
    .get('*', function (req, res){
        path = require('path');
        res.sendFile('main.html', { root: path.join(__dirname, '../public') });
    })
    .listen(3000);

also tried.

var express = require('express'),
    app     = express();

app
    .use(express.static('./public'))
    .get('*', function (req, res){
        path = require('path');
        res.sendFile(path.join(__dirname + '/public', 'main.html'));
    })
    .listen(3000);

Error: Model is not a date object

This error occurs when using AngularJS 1.3, which requires the model to be a date object. How should we get rid of this error in form-field.html?

Bourne Error

When i start the server i have an error, its about bourne

SyntaxError: Unexpected end of input
    at Object.parse (native)
    at new Bourne (/usr/lib/node_modules/bourne/lib/bourne.js:52:30)
    at Object.<anonymous> (/var/www/angular/app/api.js:5:18)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/var/www/angular/app/server.js:3:9)
11 Oct 21:32:28 - [nodemon] app crashed - waiting for file changes before starting...

Some minor HTML issues

nav.html

missing an ending li

list.html

placeholder is spelled wrong. (placholder)

1.5 Configuring Routes: Cannot GET /contacts

I get the following result when attempting to view the Contacts route.

Cannot GET /contacts

There are no errors in the console. Most likely I've probably made some silly mistake but I've been scratching my head for a while now.

update: I noticed that if I change the URI to http://localhost:3000/#/contacts it will work. It will remove the #/ automatically and appear to redirect to http://localhost:3000/contacts. However going to that URI directly does not work.

PUT http://localhost:3000/api/contact 404 (Not Found)

I am getting this error when I click on the remove button of the fields:
PUT http://localhost:3000/api/contact 404 (Not Found)

I thought I did something wrong in the code so I cloned the repository and started the server but I am still getting the same error.

What could be causing this error?