http://plnkr.co/edit/TGnjdh1BIfpTx48OKVtT?p=preview
- You need to include AngularJS as a JavaScript dependency in your index.html.
- You need to include an
ng-app
directive and specify a module (I usedmyApp
). - You need to make your password element of
type
password
. - I broke everything up into directives – Index calls
<main />
, which calls<home />
and<login />
. ng-if
creates an isolated scope so I usedcontrollerAs
andvm
to pass the data correctly between the<home />
and<login />
directives.- I added
ng-model
to the input elements for two-way binding; as the user interacts with the<input />
elements, the values on the$scope
stay up-to-date. - I used
{{ }}
to display the username. - I used
$http
to get the the username and passwords you put in a.json
file. - You’ll want to do username/password validation on the server and not download them all to the client like you’re currently doing.
- You’ll want to use an authentication framework so you don’t have to worry about things like encrypting the user’s password on the server.
- You misspelled Welcome and Logout.
- I should be setting
$scope.password
toundefined
inside thelogout
function
; I missed that. - If you wanted a solution with only (2) .html files like you asked in your question (I would suggest splitting everything up into components, instead), here you go: http://plnkr.co/edit/MdEu7wo0T9gGiLUrHkKc?p=preview