sample-project/angular.html at master · karanS1ngh/sample-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

<!DOCTYPE html>
<html>
<head>
	<title>angularjs</title>

	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.js"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/645b17e883.js"></script>

    <link rel="stylesheet" type="text/css" href="angcss.css">

</head>

<body ng-app="myApp">


			<nav class="navbar navbar-expand-md navbar-light bg-light">

			<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="collapse_target">

			<a class="navbar-brand"><img src="marvel.png" height="40px" width="150px"></a>
			<span class="navbar-text"><h4>MARVEL</h4></span>

			<ul class=" nav navbar-nav navbar-right">
				<li class="nav-item">
					<a class="nav-link" href="">Characters</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Movies</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Comics</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">More</a>
				</li>

                <li>
                <input type="text" name="searchbar" class="form-control" id="searchbar" placeholder="Search Here">
                </li>
                <li><button class="btn btn-info" id="ico"><i class="fas fa-search fa-3px"></i></button></li>

                </ul>

			<form class="navbar-form">
				<div class="form-group">

        </div>
			</form>
				<p>
					<p/>

			</nav>

		<div class="container-fluid">
		<div class="row">
			<div id="sidebar" class="col-md-4">

		      <ul>
		        <li><a ui-sref="iron">IronMan</a></li>
		        <li><a ui-sref="cap">Captain America</a></li>
		        <li><a ui-sref="thor">Thor</a></li>
		        <li><a ui-sref="spdman">SpiderMan</a></li>
		        <li><a ui-sref="ant">AntMan</a></li>
		      </ul>
		    </div>

		    <div class="col-md-8">
		    	<ui-view>
		    	</ui-view>
			</div>


		</div>
		</div>

<script>
	var app = angular.module("myApp", ["ui.router"]);
    app.config(function($stateProvider) {
    $stateProvider
    .state("iron", {
    	url:"/iron",
        templateUrl : "Templates/iron.html",
        controller : "ironController"
    })
    .state("cap", {
    	url:"/cap",
        templateUrl : "Templates/cap.html",
        controller : "capController"
    })
    .state("thor", {
    	url:"/thor",
        templateUrl : "Templates/thor.html",
        controller : "thorController"
    })
    .state("spdman", {
    	url:"/spdman",
        templateUrl : "Templates/spdman.html",
        controller : "spdmanController"
    })
    .state("ant", {
    	url:"/ant",
        templateUrl : "Templates/ant.html",
        controller : "antController"
    });
});
</script>

</body>
</html>