Git Product home page Git Product logo

angulardata's Introduction

AngularJS 1: Building a Data-Driven App

This is the repository for my course AngularJS 1: Building a Data-Driven App. The full course is available on LinkedIn Learning and Lynda.com

AngularJS 1: Building a Data-Driven App

Want to create data-driven web applications? AngularJS is a great choice. It allows you to build apps where multiple users can push and pull data at the same time, in real time. However, while the framework is easy to learn, it can be tough to master. This course is the second in a two-part series designed to show you how Angular works in the real world. It takes up where AngularJS 1: Adding Registration to Your Application left off: a simple application that checks users in and out of meetings. Here, instructor and Angular advocate Ray Villalobos shows how to enhance the existing app with new views and controllers to reward random checked-in users with prizes.

Learn how to create forms, edit database records, create methods, randomize record selections, and style and secure your app. With these project-based lessons, you'll learn how to see how data-driven programming with AngularJS can help your apps react to real-time data streams.

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add /tree/BRANCH_NAME to the URL to go to the branch you want to peek at.

Branches

The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch 02_03b then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A b means that this is how the code looks at the beginning of the video, an e means that is how the code looked at the end of the video.

You may find additional branches that correspond to other states, so for example, you may see a t, which means this is a target branch. A target branch is something I use during development or updates of a course and it's for a branch that I'm working towards. For the purposes of taking a course, you may ignore any additional branches. The master branch usually has the state of the project as I'm working through it and the final state of the code when I finish the course.

Installing

  1. Make sure you have these installed
  2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) > git clone CLONEURL
  3. CD to the folder cd FOLDERNAME
  4. Run > npm install to install the project dependencies
  5. Run > gulp to start live preview server

More Stuff

Check out some of my other courses on LinkedIn Learning and lynda.com. You can follow me on LinkedIn, read my blog, follow me on twitter, or check out my youtube channel.

angulardata's People

Contributors

planetoftheweb avatar sreilys avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angulardata's Issues

gulp does not run

Linux pad-lawrencekimsey-com 5.0.9-301.fc30.x86_64 #1 SMP Tue Apr 23 23:57:35 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

[lk@pad-lawrencekimsey-com angulardata]$ node -v
v10.16.0
[lk@pad-lawrencekimsey-com angulardata]$ npm -v
6.9.0
[lk@pad-lawrencekimsey-com angulardata]$ git --version
git version 2.21.0
[lk@pad-lawrencekimsey-com angulardata]$

[lk@pad-lawrencekimsey-com angulardata]$ gulp
bash: gulp: command not found...

Can't register a new user

error displayed when adding a new user: firebaseUsers.$set is not a function

the code below is from authentication.js, lines 41 - 59 (see third from the end)

register: function(user) {
  return auth.$createUser({
    email: user.email,
    password: user.password
  }).then(function(regUser) {
    var ref = new Firebase(FIREBASE_URL+'users');
    var firebaseUsers = $firebaseObject(ref);     

from registrations
var userInfo = {
date : Firebase.ServerValue.TIMESTAMP,
regUser : regUser.uid,
firstname: user.firstname,
lastname : user.lastname,
email: user.email
}; //user info

    firebaseUsers.$set(regUser.uid, userInfo);
  }); //promise
}, //register

TypeError: firebaseUsers.$set is not a function
at authentication.js:57
at angular.js:14551
at m.$get.m.$eval (angular.js:15830)
at m.$get.m.$digest (angular.js:15641)
at angular.js:15869
at e (angular.js:5387)
at angular.js:5659

I looked into the docs and there isn't a $set method in angularfire

gulp error

The command $gulp throws this error:
$ gulp assert.js:350
throw err;
^ AssertionError [ERR_ASSERTION]: Task function must be specified

Step 4 - README.md

Hi Rey,

npm-install should be npm install just in case someone like me gets command not found error.

Branch called "start" not found

Hi Ray,

Love the courses at Lynda, but this video on" Installing the template" references a branch called Start that doesn't seem to exist.

I grabbed the Master, just thought you should know.

Keep up the great work.
Tim

Vulnerabilities

Issue Overview

When running 'npm install' 15 vulnerabilities (1 low, 12 high, 2 critical) show up.

Is this simply a case of updating some of the

To be entirely honest I don't know if this is an issue or I am missing something.

Describe your environment

npm --version
7.0.10

node --version
v12.18.3

Steps to reproduce

Change directory to desktop:

Git clone https://github.com/planetoftheweb/angulardata.git

Change directory to 'angulardata'.

Run npm install

Expected behaviour

NPM installs modules without critical vulnerabilities

Current behaviour

npm WARN using --force Recommended protections disabled.
npm WARN audit Updating gulp-webserver to 0.5.0,which is a SemVer major change.
npm WARN audit Updating gulp to 4.0.2,which is a SemVer major change.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

A summary of the critical issues.

Run npm audit for details.
angulardata % npm audit

npm audit report

Severity: critical
Command Injection - https://npmjs.com/advisories/663
fix available via npm audit fix --force
Will install [email protected], which is a breaking change

debug <=2.6.8 || 3.0.0 - 3.0.1
Regular Expression Denial of Service - https://npmjs.com/advisories/534
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/tiny-lr/node_modules/debug

"ReferenceError: primordials is not defined" when running gulp

On this project and the prequel to it, I ran into an issue where I get an error message that says, "ReferenceError: primordials is not defined". After doing some googling, I found that this was happening because the project is on Gulp version 3 and I am running Node version 12. I did find this issue on StackOverflow https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node-js and the solution titled, "Fix it in one minute:" did fix my issue.

CSS for the start branch is a bit off

Hey Ray,

I'm taking your second angular course, and am following along well so far,
but when I got to ch02_02, I noticed the nav bar's CSS was clearly off.
so I looked at the CSS file found the "branding" class, and saw that the padding was this:
padding: 10px, 15px, 10px, 60px;
I changed the 60px to 15px and that seemed to fix it.

Curious, I looked at the CSS file for the ch02_02 branch.
It was a lot different in concerns to the "start" branch's CSS file.
This file didn't even have a padding element.
Copying the code, I replaced it with the existing code I had when I cloned the start branch.
Looking further, I saw that all of the branches's CSS files were good EXCEPT the start branch's.

Looks like it's a very simple fix. Keep up the great work on lynda.com. Look forward to more angular courses.

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.